Uso questa tecnica con le immagini sul mio blog. Quando l'utente passa con il mouse sulla miniatura di qualsiasi voce, aumenta senza problemi. D'accordo, non è male e sembra bellissimo.
E questo viene fatto solo con CSS3, e molto semplicemente. Ora ti dirò come farlo.
Puoi vedere come funziona nella demo e sul mio blog nella pagina principale.
Zoom fluido dell'immagine al passaggio del mouse solo su CSS3.
HTML
Per prima cosa dobbiamo preparare un semplice markup html per le nostre immagini, in questo caso ne avremo 3.
Come puoi vedere, tutte le immagini hanno la classe image a cui, infatti, imposteremo i parametri.
css
Ed ecco come appaiono gli stili:
Immagine ( overflow:nascosto; larghezza: 380px; altezza:250px; )
Abbiamo creato un blocco regolare di 380 per 250 pixel. Questo blocco dovrebbe avere le stesse dimensioni dell'immagine (nel nostro caso 380x250). Di conseguenza, se l'immagine è più grande o più piccola, la dimensione del blocco .image è la stessa dell'immagine.
E assicurati di impostare la regola overflow:nascosto; È necessario affinché la nostra immagine non vada oltre il blocco quando ingrandita.
Ora impostiamo le regole per le immagini stesse:
Image img ( -moz-transition: allentamento di tutti gli 1 s; -o-transition: allentamento di tutti gli 1 s; -webkit-transition: allentamento di tutti gli 1 s; ) .image img:hover( -webkit-transform: scale( 1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); )
L'animazione avviene con l'aiuto di un parametro in CSS3. L'intera animazione richiede un secondo. Se vuoi che l'immagine cresca più velocemente, diminuisci questo valore.
Nella demo, l'immagine viene ingrandita 1,1 volte. Se imposti il valore su 2, le dimensioni dell'immagine raddoppieranno e così via.
Questo è tutto, amici. Come promesso, la lezione sarà molto semplice. Spero che questo semplice effetto per le immagini vi piaccia. Ci vediamo presto.
Le immagini sui siti sono abbastanza comuni e allo stesso tempo sono grandi, ma i design dei siti non sempre consentono di inserirli nel formato completo. Pertanto, è necessario trovare un modo che ti permetta di aumentarli.
Iniziamo con i metodi primitivi e finiamo con il modo migliore per ingrandire un'immagine.
1. Ingrandimento dell'immagine tramite link
URL-immagine-o-copia-minore"/>
Spiegazione ad esempio:
- - in modo che il link non trasferisca peso all'immagine;
- target="_blank" - l'immagine si aprirà in una nuova scheda.
L'ultimo parametro è abbastanza importante, perché spesso a causa dell'inesperienza dell'utente, può verificarsi la seguente situazione: dopo aver aperto una pagina con un'immagine, non sa come tornare indietro e quindi chiude semplicemente la scheda, il che significa che ha completamente lascia il sito. Dopo aver registrato l'ultimo parametro, lo assicuriamo contro tale caso, perché avrà la pagina iniziale aperta.
Esempio di lavoro:
Nonostante la facilità d'uso, questo metodo è tutt'altro che il migliore, dal momento che devi aprire una nuova pagina per ingrandire l'immagine, ma questo metodo può visualizzare immagini di qualsiasi dimensione. Quindi concludiamo: se devi aumentare immagini di dimensioni molto grandi, allora questo è l'unico modo sicuro per farlo.
2. Zoom automatico dell'immagine al passaggio del mouse
Il nome del metodo riflette chiaramente la sua essenza: quando si passa il mouse sopra l'immagine, viene automaticamente ingrandita. L'implementazione del metodo è elementare, ma ancora una volta non mi piace questo metodo perché è impossibile spostare semplicemente il cursore attraverso l'immagine. Dopotutto, aumenterà sempre: questo può iniziare a infastidire l'utente.
Il codice seguente implementa la possibilità di eseguire automaticamente lo zoom al passaggio del mouse:
Spiegazioni ad esempio:
- img.zoom (max-width: 150px ) - imposta la larghezza dell'immagine prima dello zoom;
- img.zoom:hover (max-width: none ) - imposta la larghezza dell'immagine dopo l'ingrandimento (il parametro none significa che non c'è limite di dimensione massima);
3. Ingrandisci l'immagine al clic
Questo è il metodo più comune e conveniente per ingrandire le immagini. Inoltre, ci sono molti modi e opzioni per l'implementazione. Considera alcune delle opzioni più popolari:
3.1. Zoom con messa a fuoco attiva
Dopo aver cliccato sull'immagine, si ingrandisce, ma per questo motivo il testo si sposta verso il basso, quindi questo metodo è tutt'altro che il migliore. Ecco un esempio di codice:
Come appare sulla pagina:
3.2. Ingrandimento di un'immagine sulla pagina
Di seguito è riportato il codice per implementare questo metodo
Come appare sulla pagina:
Le varianti 3.1 e 3.2 sono completamente basate sulle capacità CSS e quindi sono modi "leggeri", perché. non caricare la pagina con script non necessari. Ci sono altre opzioni che si basano anche sui CSS, tuttavia sono già più esotiche. Non li tratterò nell'ambito di questo articolo, poiché alcuni browser non supportano tali cose.
3.3. Bel ingrandimento
Questo metodo è il più bello e conveniente secondo me. Per collegarlo, dovrai armeggiare un po 'con l'aggiunta di vari script, quindi per l'implementazione, considera un'installazione passo-passo:
L'archivio conterrà una cartella contenente un'immagine, due file .js e un file .css.
2) Aggiungi questi file al tuo sito così come sono nell'archivio (cioè la cartella img dovrebbe essere nella directory in cui saranno i file .js e .css).
3) In ogni pagina del sito in cui verrà utilizzato l'ingrandimento dell'immagine, è necessario includere il metodo e lo stile simplebox:
>
Я советую указывать полный путь к файлам simplebox_util.js , simplebox.css и simplebox.js , чтобы их можно было легко использовать для каждой страницы сайта.
Для использования этого метода зуммирования используется следующая конструкция:
Примечание
Вместо адреса меньшей копии изображения можно прописать адрес основного изображения, но при этом применить атрибут width, в котором указать небольшую ширину (читайте подробнее о ).
Как это выглядит на странице.
Для того чтобы организовать такое увеличение, я предлагаю два способа. Оба на чистом CSS
, без использования JavaScript
. Первый способ увеличивает блок или картинку, в зависимости к чему Вы собираетесь применить данный метод, без влияния на остальные элементы страницы. Он как бы увеличивается поверх остальных. Для того чтобы организовать такое плавное увеличение, нужно:
1. Определится какой элемент будет. В нашем случаи это будет блок с классом block
2. Выводим его в нужном месте html кода нашего сайта
В файле стилей присваиваем ему следующие параметры:
Block{ width:150px; height:150px; background:#f30; display: block; opacity: 1; -webkit-transform: scale(1,1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 550ms; -moz-transform: scale(1,1); -moz-transition-timing-function: ease-out; -moz-transition-duration: 550ms; } .block:hover { -webkit-transform: scale(1.2,1.2); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 550ms; -moz-transform: scale(1.2,1.2); -moz-transition-timing-function: ease-out; -moz-transition-duration: 550ms; }
Можно проверять готовый результат. Ширину, Высоту, фон и другие параметры задаем какие угодно, главное указать правильно параметры -transform
- отвечающий за размер увеличения, причем просто в блоке его трогать не надо, он по умолчанию 1 - исходный размер, а вот при свойстве :hover
мы его меняем на нужное, до какого размера будет увеличение, в данном случаи 1.2.
Конечно же Вы можете изменить наоборот, допустим если Вам нужно плавное уменьшение при наведении, тут никто не запретит Вам этого сделать.
Следующее свойство - это -transition
, отвечающее за скорость анимации в миллисекундах. Если его не использовать, все будет резко увеличиваться и уменьшаться. В данном примере значение этого параметра - 550ms
.
Второй способ немного отличается от первого. Его анимация, увеличение происходит с влиянием на другие блоки и элементы страницы. При увеличении он как бы отодвигает их в стороны. Тем не менее, данный способ, тоже применяется и многим именно он и понадобится для решения конкретной поставленной задачи.
И так что же нам нужно сделать для того, чтобы организовать такое плавное увеличение при наведении?
1. Как и в первом примере определяем блок с классом уже block2
2. Опять же выводим в нужном месте
И присваиваем ему стили:
Block2{ width: 150px; height: 150px; background:#390; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; } .block2:hover { width: 200px; height: 200px; }
В данном случаи, мы просто изменяем размер блока в пикселях и добавляем свойство -transition , которое делает плавным увеличение. В отличии от первого способа, мы указываем время анимации не в миллисекундах, а в секундах. На примере - это 2 секунды. Вот такими не хитрыми способами можно сделать плавное увеличение не прибегая к использованию скриптов. Можно обойтись чистым СSS.
Старые версии браузеров, могут не понять что от них хотят, поэтому смотрите сами. Лично я не обращаю внимания и не забиваю голову плохим с тем, что возможно, 1 из миллиона зайдет на мой сайт с древнего убогого Internet Explorer и у него что-то не отобразится. Для таких пользователей я вывожу сообщение, что им пора отказаться от мусора и перейти на нормальный, человеческий браузер.
На этом все, спасибо за внимание. 🙂
| 18.02.2016
CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.
Удивительно, как простые вещи могут оживить обычную веб-страницу, сделать ее более доступной для восприятия пользователями. Речь идет о CSS3 переходах, с помощью которых можно позволять элементу трансформироваться и изменять стиль, например, при наведении курсора. Девять примеров CSS3 анимации, которые доступны ниже, помогут создать на сайте атмосферу отзывчивости, а также улучшить общий вид страницы благодаря красивым плавным переходам.
Для более детального ознакомления вы можете скачать архив с файлами.
Все эффекты работают с помощью свойства transition (англ. transition - «переход», «превращение») и псевдокласса:hover , который определяет стиль элемента при наведении на него курсора мыши ( в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.
Body > div { width: 500px; height: 309px; background: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; transition: all 0.3s ease; }
1. Изменение цвета при наведении курсора
Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс:hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:
Color:hover { background:#53ea93; }
2. Появление рамки
Интересная и яркая трансформация - внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс:hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px) и её цвет:
Border:hover { box-shadow: inset 0 0 0 23px #53ea93; }
3. Свинг
Данная CSS анимация - исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:
- @keyframes - базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
- animation и animation-iteration-count - свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.
4. Затухание
Эффект плавного затухания - это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 - то есть полная непрозрачность, после чего указать её значение при наведении мыши - 0.6:
Fade { opacity: 1; } .fade:hover { opacity: 0.6; }
Для противоположного результата поменяйте значения местами:
5. Увеличение
Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:
Grow:hover { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
6. Уменьшение
Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:
Shrink:hover { -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); }
7. Трансформация в круг
Одна из часто используемых анимаций - прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с:hover и transition , это можно реализовать без проблем:
Circle:hover { border-radius: 70%; }
8. Вращение
Забавный вариант анимации - поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением - rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:
Rotate:hover { -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); }
9. 3D тень
Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):
Threed:hover { box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: translateX(-7px); transform: translateX(-7px); }
Поддержка браузерами
На сегодняшний день свойство transition поддерживается следующими браузерами:
| Десктопные браузеры | |
|---|---|
| Internet Explorer | Поддерживается версией IE 10 и выше |
| Chrome | Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit-) |
| Firefox | Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz-) |
| Opera | Поддерживается с версии 12.1 |
| Safari | Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit-) |
Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.
Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!
Довольно частая практика на современных сайтах - плавное увеличение блока с изображением. Как же это сделать с помощью CSS?
Плавное увеличение изображения при наведении курсора CSS
Делим решение задачи на два этапа: разметка html и стили css. Для начала разметим блоки с изображениями внутри:
Всем блокам присвоили класс box. Одним из важных его свойств будет overflow:hidden, то есть скрыть всё, выходящее за рамки блока. Будем же увеличивать изображение? Да. Но видима будет только часть, ограниченная блоком.
Это мы разобрали. Переходим к описанию стилей.
Box {
overflow:hidden;
width: 250px;
height:250px;
}
Всё как и оговаривали - квадратные блоки, схожие по размеру со стандартным, не увеличенным изображением, то тоже 250 на 250.
Свойство overflow:hidden как и говорилось ранее, не позволить выходить за рамки блока при увеличении.
Свойства касающиеся изображений:
Box img {
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
}
Box img:hover{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
Тут без CSS3 никуда. Все современные браузеры анимацию отобразят. Нужны параметры transition и transform. Время на анимацию выставляем 1 секунду (1s). Увеличение будет происходить в 1.2 раза. Вы можете изменить на Ваш вкус.
Теперь к примеру работы!
