вълнов ефект с jQuery
Понякога е забавно да показвате съдържание по малко по-различен начин. Днес искаме да ви разкажем за експеримент с показване на изображения и съдържание по уникален начин - под формата на вълна. Идеята е първоначално да се подготвят по-малки миниатюри, които да се завъртят малко и да се поставят във форма на вълна. Щракването върху миниатюра ще отведе потребителя до по-голяма версия на изображението. Като щракне отново, потребителят ще може да отвори пълната версия на изображението или съдържанието.
Демото използва изображения от Крис Уилис. Те се разпространяват под лиценз Attribution 2.0 Generic (CC BY 2.0).
Икони от WPZOOM (разпространени под лиценз Attribution-ShareAlike 3.0 Unported); можете да ги изтеглите от тук: WPZOOM: Пакет с икони за програмисти (154 безплатни икони)
Привлекателният слайдер е създаден от Орман Кларк от premiumpixels.com
Как работи
HTML структурата ще се състои от основна обвивка с дадения класwd-wrapper. В демонстрацията позиционирането е зададено като абсолютно, което означава, че можем да разтегнем обвивката до цялата страница, като приложим стойностите наляво/надясно/горе/долу, без да се налага да указваме параметрите за ширина и височина. Може да бъде и относителен елемент със специфични опции за ширина и височина. Нашата вълна автоматично ще се регулира спрямо височината на обвивката. Можете да проверите работата, като промените размера на прозореца.
Първоначално ще имаме вълна от малки миниатюри, които всички ще се въртят по различен начин:
За да добавим изображения и съдържание, се нуждаем от следния елемент:
Има няколкоопции, които можете да използвате за показване и анимиране на вълната.
Подготвили сме 4 демонстрации, всяка от които използва различни стойности:
По подразбиране: в тази демонстрация показваме вълната със стандартните опции Демо 2: миниатюрите са малко по-големи, амплитудата на вълната е по-малка и честотата е по-висока, което прави вълната по-плавна. Демо 3: Тук сме задали размерите на миниатюрите да бъдат почти еднакви и някои малко по-малки. Скоростта и свободата на анимацията също са различни. Демо 4: Разликата в ъгъла на завъртане е по-висока. А началото на вълната винаги е различно.
Надяваме се, че сте харесали нашия малък експеримент и ще го намерите за полезен!