| |
|
|
| | если я на сайте увидел какой-то интересный эффект, например при наведении мыши на какой-либо элемент, какой д.б. последовательность действий, чтобы точно узнать, как это реализовано на сайте. | |
| |
|
|
| |
|
|
| |
для: rodmial
(21.01.2015 в 14:46)
| | | посмотреть код?
подключить голову? | |
| |
|
|
| |
|
|
| |
для: elenaki
(21.01.2015 в 15:04)
| | | например сайт http://flowersbaza.ru справа сверху кнопка "заказать звонок". Посмотрите, пожалуйста, код и скажите, как реализован эффект, возникающий при наведении на неё.
или ниже "доставляем 9 млн штук цветов ежемесячно". как реализован эффект при наведении на "9 млн"
или как реализовано выдвижение элементов (прокрутите ещё ниже), как только они появляются в поле зрения
и научите в следующий раз это делать самому.
всё, что сейчас приходит по этому поводу в подключённую голову, так это "проинспектировать элемент", посмотреть обработчики событий. но ничего нужного себе найти не могу. | |
| |
|
|
| |
|
|
| |
для: rodmial
(21.01.2015 в 17:39)
| | | > и научите в следующий раз это делать самому.
Изучайте эффекты анимации в JQuery и CSS3. | |
| |
|
|
| |
|
|
| |
для: Mookapek
(21.01.2015 в 18:06)
| | | что значит изучайте? это само собой. я про другое. я имею возможность узнать, как реализован конкретный эффект на конкретном сайте? как мне это сделать?
> и научите в следующий раз это делать самому.
- смысле, научите, как самому найти, как это сделано | |
| |
|
|
| |
|
|
| |
для: rodmial
(22.01.2015 в 09:21)
| | | Не знаю, что там в коде на том сайте.
Но с помощью CSS3 можно делать что-то подобное:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div {
margin: 0 auto;
margin-top: 250px;
width: 100px;
height: 100px;
border: 2px solid #e11;
border-radius: 8px;
background: #e11;
transition-property: transform, background, border;
transition-duration: 1s;
}
div:hover {
transform: scale(1.2);
background: #11e;
border: 2px solid #11e;
}
</style>
<body>
<div></div>
</body>
</html>
|
В transition-property обозначаем свойства, которые менются при наведении указателя мыши на элемент.
А transition-duration обозначает время трансформации.
transform: scale(1.2) увеличивает элемент в 1.2 раза. | |
| |
|
|
| |
|
|
| |
для: Mookapek
(22.01.2015 в 18:42)
| | | спасибо. пригодится.
а как еще сделать, чтобы, пока мышка на элементе, он бы сначала увеличивался, потом уменьшался, потом опять увеличивался и т. д.
что у меня не так
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function mzoom_in(){
jQuery("#my_div").animate({ width: jQuery(this).width()+1,height: jQuery(this).height()+1}, 'slow');
}
function mzoom_out(){
jQuery("#my_div").animate({ width: jQuery(this).width()-1,height: jQuery(this).height()-1}, 'slow');
}
jQuery(document).ready(function(){
w=jQuery("#my_div").width();
h=jQuery("#my_div").height();
jQuery('#my_div').hover(
function(){while(1){mzoom_in();mzoom_out();}/**/},
function(){jQuery("#my_div").width(w);jQuery("#my_div").height(h);}
);
});
</script>
</head>
<body>
<div id="my_div" style="width:30px;height:30px; border:1px solid red;">1</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: rodmial
(23.01.2015 в 11:01)
| | |
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#container {
margin: 0 auto;
margin-top: 250px;
width: 100px;
height: 100px;
}
#circle {
width: 100px;
height: 100px;
border-radius: 50px;
background: #11e;
opacity: 0.5;
color: #FFF;
font-size: 25px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
@keyframes zoom {
from { transform: scale(1); }
50% { transform: scale(1.2); opacity: 1; background: #e11;}
to { transform: scale(1); opacity: 0.5; background: #11e;}
}
#circle:hover {
animation-name: zoom;
animation-duration: 1.4s;
animation-iteration-count: infinite;
}
</style>
<body>
<div id="container">
<div id="circle">Наведи<br>курсор</div>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Mookapek
(24.01.2015 в 20:02)
| | | ничего не происходит при наведении курсора на #circle
но всё-таки интересно, почему не работает мой код? подскажите, пожалуйста | |
| |
|
|
| |
|
|
| |
для: rodmial
(25.01.2015 в 14:21)
| | | На счет вашего кода - не знаю.
>ничего не происходит при наведении курсора на #circle
Chrome, оказывается, в отличии от Firefox не понимает анимацию без префиксов.
Добавлен префикс -webkit. Протестировано в Firefox и Chrome.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#container {
margin: 0 auto;
margin-top: 250px;
width: 100px;
height: 100px;
}
#circle {
width: 100px;
height: 100px;
border-radius: 50px;
background: #11e;
opacity: 0.5;
color: #FFF;
font-size: 25px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
@-webkit-keyframes zoom {
from { transform: scale(1); }
50% { transform: scale(1.2); opacity: 1; background: #e11;}
to { transform: scale(1); opacity: 0.5; background: #11e;}
}
@keyframes zoom {
from { transform: scale(1); }
50% { transform: scale(1.2); opacity: 1; background: #e11;}
to { transform: scale(1); opacity: 0.5; background: #11e;}
}
#circle:hover {
-webkit-animation-name: zoom;
-webkit-animation-duration: 1.4s;
-webkit-animation-iteration-count: infinite;
animation-name: zoom;
animation-duration: 1.4s;
animation-iteration-count: infinite;
}
</style>
<body>
<div id="container">
<div id="circle">Наведи<br>курсор</div>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Mookapek
(25.01.2015 в 16:13)
| | | так работает как надо, спасибо.
но мой вопрос остаётся открытым. | |
| |
|
|
| |
|
|
| |
для: rodmial
(25.01.2015 в 17:21)
| | | Я полагаю, проблема заключается в бесконечном цикле. | |
| |
|
|
| |
|
|
| |
для: Mookapek
(25.01.2015 в 17:32)
| | | так а он разьве не должен быть бесконечным? пока мышка на элементе - так и должно быть.
а как тогда? (отталкиваясь именно от моего кода) | |
| |
|
|
