Effect for different elements (depend on current screen position) that triggered from scroll
Question
We have:
Html
<div class="category1">
<div class="main_text">
<ol class="rounded-list">
<li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
<li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
<li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
<li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
<li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
<li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
<li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
<li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
<li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
<li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
<li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
<li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
<li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
<li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
</ol>
</div>
</div>
CSS
.category1 {
margin: 10px;
padding-bottom: 300px;
}
.main_text {
background: #AFCEE0;
color: #000;
line-height: 16px;
font-size: 14px;
}
.rounded-list {
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 15px'trebuchet MS', 'lucida sans';
padding: 5px;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.rounded-list ol {
margin: 0 0 0 2em;
}
/* -------------------------------------- */
.rounded-list h3 {
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #ddd;
color: #444;
text-decoration: none;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
border-radius: .3em;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.rounded-list h3:hover {
background: #eee;
}
.rounded-list h3:hover:before {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.rounded-list h3:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #87ceeb;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
In this example effect triggers on hover.
Open fiddle, put your mouse on first <li>
and start scroll page down.
Question: how make this scroll effect independent from mouse position?
So i need:
When you scroll page - elements effected one by one
When you hover element - it effected
Solution
So I found solution and it is very simple:
First need to add class to hover css effect:
.h3_sel, .rounded-list h3:hover{
background: #eee !important;
}
.h3_sel:before, .rounded-list h3:hover:before {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
and then some jquery magic:
$(window).scroll(function () {
var sc = $(window).scrollTop();
var c = Math.floor(sc / 70); // 70 depends of your <li> height
$("h3").removeClass("h3_sel");
$(".rounded-list li:nth-child("+ c +") h3").addClass("h3_sel");
});
what I have:
hover effect works, scroll effect works, this is very compact, no need to attach any plugins I can add any amount of <li>
.
Thanks to me
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow