|
|
|
Эффект искажения изображения на JS
Скрипт, реализующий данную анимацию, работает на библиотеке curtains.js
Пример:
HTML:
<div> <div></div> <div> <img src=»fish.jpg» crossorigin=»anonymous»/> </div> </div>
<div> <div></div> <div> <img src=»fish.jpg» crossorigin=»anonymous»/> </div> </div> |
CSS:
.canvas-wrap { position: relative; } #canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .plane { width: 100%; height: 500px; position: relative; overflow: hidden; } .plane img { display: none; } .no-curtains .plane { overflow: hidden; display: flex; align-items: center; justify-content: center; } .no-curtains .plane img { display: block; max-width: 100%; object-fit: cover; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.canvas-wrap { position: relative; } #canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .plane { width: 100%; height: 500px; position: relative; overflow: hidden; } .plane img { display: none; } .no-curtains .plane { overflow: hidden; display: flex; align-items: center; justify-content: center; } .no-curtains .plane img { display: block; max-width: 100%; object-fit: cover; } |
JS:
Подключаем библиотеку curtains.min.js и скрипт самого эффекта underwater.js
Найдено на codepen.io у пользователя Martin Laxenaire
Автор фотографии PublicDomainPictures
Библиотека curtains.js на github
Эффекты для сайта — Страница 2 — Уникальные скрипты и готовые решения для сайта
Ajax окна uCoz
Ajax окна uCoz
CSSCSS
Flash
Flash
HTML
HTML5
Javascript
Javascript
jQuery
Lightbox эффект
Lightbox эффект
PHP
PHP
WordPress
WordPress
Без категории
Без категории
Блог Apocalypse
Блог Apocalypse
Всё для Android
Всё для Android
Всё для Linux
Всё для Linux
Всё для Windows
Всё для Windows
Галереи изображений
Галереи изображений
Графика для сайта
Графика для сайта
Зимний раздел
Зимний раздел
Интересные статьи
Интересные статьи
Меню
Меню
Осенний раздел
Осенний раздел
Переключатели
Переключатели
Скрипты для uCoz
Скрипты для uCoz
Скрипты от Apocalypse
Скрипты от Apocalypse
Статьи для вебмастера
Статьи для вебмастера
Хинты
Хинты
Эффекты для сайта
Эффекты для сайта
JSPrime — библиотека javascript эффектов
Некоторое время назад у меня появилась идея создать библиотеку javascript эффектов, которая могла бы помочь многим создателям сайтов украсить их страницу и облегчить работу. Но к тому моменту я знал, что уже существуют не мало эффектов, но их минусом было то, что для них нужно было специально загружать библиотеки jquery, mootools, которые весят не мало, да и не каждый может писать на jquery. Ведь чистый javascript более знаком для большинства.
И первой моей идеей было создание подобия эффекта slimbox, который я назвал blackout. И примером выгоды использования моего эффекта является то, что он весит 10кб, что на много меньше 30кб кода mootools, 2кб css и 8кб самого кода эффекта.
Вторым эффектом я решил создать фотоленту, т.к. меня интересовал метод построения ленты как на mail.ru. До этого мне пришлось создать, что то на подобие фото ленты, что я описал в своем блоге. Но это было не то, т.к. мой подход походил на фотоленту, но не был именно таким, как я желал. Т.е. мне хотелось при листании ленты видеть как фотографии явно уходят на право или лево, а не удаляются и добавляется новая фотка (как при моем случае). И однажды до меня дошло использовать overflow:hidden и margin’ы с минусовыми показателями. Вот тогда я и создал настоящую фотоленту под названием PhotoLine.
И так же хочу выделить эффект MySelect. Идея создание его пришла в голову при верстке, в котором имелись select’ы, и которые по разному отображались в разных браузерах, да и не поддавались нормальному оформлению. Вот тогда я и решил создать подобие настоящего селекта, который можно настроить как угодно и который будет отображаться во всех браузерах одинаково. А вопрос отправки выделенных данных на сервер я решил созданием невидимого инпута.
Так же я намерен дальше и дальше увеличивать свою библиотеку эффектов, к которой можно было бы найти любой интересующий эффект для веб разработчика. И если у вас есть идеи для создание какого нибудь полезного эффекта, пишите в комментариях и они будут добавлены в сайт.
Очень надеюсь, что вам понадобятся эти эффекты и принесут пользу для ваших сайтов!
С уважением Кадыр.