Im довольно знакомы с HTML, CSS, Javascript и JQuery, как я могу достичь этого удивительного слайда, который у них есть на их веб-сайте, где фон исчезает, когда основной элемент на слайде входит со стороны (элементы означают картинки).Как я могу достичь этого удивительного слайд-шоу?
Сайт: http://www.scorpiondesign.com/
Если вы желаете идти использовать эффекты jQueryUI, то вы можете легко сделать это, вам нужно иметь PNG изображений и любой HTML вы хотите в каждом слайде и есть, что слайд-дисплей установлен на нет, наружный ползун должен иметь перепускное свойство скрыто, теперь вы можете двигать изображения, используя просто:
$(".thumb1").click(function(){
$('#slide1').show('slide', {direction: 'left'}, 1000);
});
.thumb1 является эскизом для слайд 1, вы можете использовать стольких эскизы, как вы хотите, и вы бы должны соответствующим образом измените jquery. #slide1 содержит все элементы html, которые вы хотите сместить.
Вопрос hmm: изображения для слайда будут уложены друг на друга с дисплеем, установленным равным ни одному, или они будут рядом друг с другом в строке с переполнением слайда, который будет скрыт, поэтому вы не можете видеть изображения рядом с каждым Другие? –
Вы можете скрыть существующий слайд, используя: $ ('# slide0'). Hide ('slide', {direction: 'left'}, 1000); –
Вы можете установить изображения друг над другом или любым другим способом, которым вы хотите их стилизовать, используя абсолютное позиционирование на них и не забудьте установить положение контейнера относительно. –
Похоже, что фон выцветанию контролируется JavaScript, и все остальные элементы PNGs с прозрачным фоном, чьи анимации также контролируются Javascript
Ну не звучит слишком невероятно скучно, но это требует осмотрительности и тщательного программирования. То, что я могу сказать, глядя на страницу, это слой трех или более прозрачных изображений на фоне. Когда вкладка изменена, фон исчезает до следующего слайда, а прозрачные изображения перемещаются с различной скоростью. Я не знаю, где вы могли бы найти библиотеку, чтобы обеспечить это, но с некоторыми усилиями вы могли бы снять это с себя! – rfoo
Если вы используете Google Chrome, вы можете использовать Inspect Element для просмотра этого удивительного слайд-шоу в действии. – rfoo