applying code to text lines instead of container div - javascript

I have the following code which scrolls the the content at different speeds
$.fn.moveIt = function() {
var $window = $(window);
var instances = [];
$(this).each(function() {
instances.push(new moveItItem($(this)));
});
window.onscroll = function() {
var scrollTop = $window.scrollTop();
instances.forEach(function(inst) {
inst.update(scrollTop);
});
}
}
var moveItItem = function(el) {
this.el = $(el);
this.speed = parseInt(this.el.attr('data-scroll-speed'));
};
moveItItem.prototype.update = function(scrollTop) {
this.el.css('transform', 'translateY(' + -(scrollTop / this.speed) + 'px)');
};
// Initialization
$(function() {
$('[data-scroll-speed]').moveIt();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 data-scroll-speed="3">text 1</h1>
<p data-scroll-speed="5">text 2 .... content covers multiple lines full parapgraph</div>
The code works to scroll each piece at a different 'speed,' but I want it to apply to each line in the content. (so each line in the content scrolls at a different speed)
EDIT: the content isn't hardcoded, its generated through the wordpress admin/user

I thought if each line is dynamically put into a different <span> would solve the problem. A nice start for you:
$("p").each(function(i) {
var pContent=$(this).text();
$(this).html("<span id='line"+i+"-0'><span>");
var lineID=0;
while (pContent.length>0) {
var firstSpace=pContent.indexOf(" ")+1;
if (firstSpace==-1) firstSpace=pContent.length;
var originalData=$("#temp-span").text();
$("#temp-span").append(pContent.substring(0,firstSpace));
if ($("#temp-span").width()>$(".container").width()) {
$("#line"+i+"-"+lineID).text(originalData);
$("#temp-span").text("");
$(this).append("<span id='line"+i+"-"+(++lineID)+"'></span>");
} else {
pContent=pContent.substring(firstSpace,pContent.length);
}
}
if ($("#temp-span").text().trim()!="") {
$("#line"+i+"-"+lineID).text($("#temp-span").text());
$("#temp-span").text("");
}
});
$("pre").text($(".container").html());
#temp-span {
width: auto;
white-space: nowrap;
display: none;
}
.container {
width: 100vw;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
}
span {
display: block;
}
pre {
white-space: normal;
background-color: #8ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis lacinia dui sit amet dapibus. Curabitur nec mi tellus. Nullam posuere auctor justo, vel ornare odio malesuada vitae. Sed ullamcorper libero sit amet est posuere, sed cursus metus tristique. Vestibulum varius erat at mi dapibus, quis scelerisque leo tempor. In auctor maximus tempus. Sed sed tristique est, nec auctor nulla. Aenean et porttitor ex, ac malesuada ipsum. Quisque sit amet urna pulvinar libero scelerisque maximus. Morbi ac tincidunt libero. Donec tempus suscipit hendrerit. Nulla et purus ultricies, eleifend augue vitae, egestas odio. Pellentesque ante libero, pulvinar quis orci quis, sodales tincidunt libero. Sed volutpat purus diam, quis gravida lacus commodo quis. Nunc interdum metus at condimentum gravida. Ut vulputate est non ultrices maximus.
</p>
<p>
Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean pharetra dignissim mattis. Cras purus risus, accumsan a sapien eu, ultricies dictum diam. In hendrerit, erat efficitur sodales tristique, purus sapien dignissim magna, non vulputate dolor tellus vestibulum sapien. Suspendisse ullamcorper dolor sit amet nisl vulputate, vitae condimentum nunc sodales. Pellentesque ut ullamcorper quam. Quisque et mauris lacus. Suspendisse commodo facilisis mi. Suspendisse sit amet metus felis.
</p>
<span id="temp-span"></span>
<h4>Code:</h4>
<pre></pre>
</div>

Related

Hide Header on Scroll Down After a Certain Point?

I have this code, used from https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp
I'm wondering if it's possible to amend this so that the header only disappears on scroll after a certain height says 120px from the top of the page. Here's the code I have currently:
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
#navbar {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: 0; /* Stay on top */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
/* Style the navbar links */
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
section {
background-color: grey;
margin-top: 50px;
}
<div id="navbar">
Home
News
Contact
</div>
<section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan tincidunt massa in tristique. Vestibulum mattis erat sed porttitor cursus. Praesent dignissim, sem vel tincidunt venenatis, dolor orci sollicitudin ipsum, et vestibulum mauris ex non felis. Cras pulvinar lectus eu risus lobortis malesuada. Sed accumsan metus quis ante scelerisque molestie. Maecenas molestie arcu in massa egestas tempus. Vestibulum augue purus, tincidunt ut porta quis, pulvinar imperdiet neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque id convallis odio.
Sed fringilla rutrum nulla. Nam diam ex, gravida at nisl vel, feugiat vehicula ex. Duis et ligula vitae velit pretium finibus quis sit amet diam. Sed ac interdum magna, a pharetra ante. Quisque vestibulum luctus ligula, elementum aliquam sem molestie non. Maecenas auctor magna a magna hendrerit, ornare facilisis tortor finibus. Nulla eu augue leo. Donec euismod scelerisque porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula sit amet nisi eu porttitor. Donec dictum quis erat ut tincidunt. Curabitur pharetra iaculis purus. In hac habitasse platea dictumst. Aenean egestas laoreet lorem, ac eleifend magna.
Sed quis feugiat diam. Nunc euismod dapibus mauris quis egestas. Nam venenatis magna sit amet lorem semper, eget sagittis dolor malesuada. Sed fringilla pulvinar maximus. In venenatis ligula magna, id pulvinar magna auctor condimentum. Aliquam dictum erat sit amet elit tristique feugiat. Curabitur feugiat nunc ultricies sapien finibus condimentum. Duis gravida, ipsum sit amet luctus vulputate, odio quam ornare sapien, non aliquam enim metus eget dolor. Duis nisl lorem, tempor non cursus nec, lobortis vel nibh. Suspendisse consectetur sed nisl in vestibulum. Nunc at placerat ante. Donec ante massa, mollis vel ultricies sed, ullamcorper at risus. Morbi euismod laoreet sagittis.</section>
Currently, the header disappears as soon as you start scrolling down, but I'd like it to stay visible until after you've scrolled past the height of the header.
Hopefully, that makes sense.
You can just check when the scroll position is greater than 120 and then make it disappear, revert it back when it's less than 120
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (currentScrollPos > 120) {
document.getElementById("navbar").style.top = "-50px";
} else {
document.getElementById("navbar").style.top = "0px";
}
}

How to make next/previous paragraph visible inside in a div?

I have four paragraphs inside a div and the first child (or rather the first paragraph) is visible. Besides, I have two buttons ("next" and "previous") and when the button is clicked I have to hide the current paragraph and show the next/previous paragraph.
I've tried to write a function that accomplishes this goal but it's doesn't seem to be working. It doesn't hide the current paragraph and doesn't show the next/previous sibling.
Here is an example:
var show = function(elem) {
elem.style.display = 'block';
};
var hide = function(elem) {
elem.style.display = 'none';
}
var toggle = function(elem, next) {
if (window.getComputedStyle(elem).display === 'block') {
hide(elem);
show(next);
return;
}
};
var count = 0;
document.addEventListener('click', function(event) {
if (!event.target.classList.contains('toggle')) return;
event.preventDefault();
var e = document.getElementById("bal");
var content = e.childNodes[count];
count++;
var next = content.nextSibling;
if (!content) return;
toggle(content, next);
}, false);
#bal {
width: 48%;
border: 1px solid red;
padding: 1em;
}
#bal p {
display: none;
}
#bal p:nth-child(1) {
display: block;
}
#jobb {
width: 48%;
float: right;
}
<div id="jobb">
<form id="gombok">
<span>
<input type="button" name="previous" value="Previous">
<input type="button" class="toggle" href="#bal" name="next" value="Next">
</span>
</form>
</div>
<div id="bal" class="sib">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>
This function doesn't recognize the current paragraph and if I click two times on the "next" button it deletes the text of the first paragraph.
#dbramwell has a valuable explanation why your code wasn't working:
Using childNodes rather than children. As you're trying to set style on them, you need to use children to get elements rather than nodes. See here.
if(!content) return;, you need to check if "next" exists, rather than content, as on the last paragraph content will exist when next doesn't
and also corrected your function:
var show = function (elem){
elem.style.display = 'block';
};
var hide = function (elem){
elem.style.display = 'none';
}
var toggle = function(elem, next){
if (window.getComputedStyle(elem).display === 'block'){
hide(elem);
show(next);
return;
}
};
var count = 0;
document.addEventListener('click', function(event){
if (!event.target.classList.contains('toggle')) return;
event.preventDefault();
var e = document.getElementById("bal");
var content = e.children[count];
count++;
var next = e.children[count];
if(!next) return;
toggle(content, next);
}, false);
<!DOCTYPE html>
<html lang="hu">
<head>
<title>JS példák</title>
<meta charset="utf-8">
<meta name="description" content="JavaScript példák">
<script src="utils.js"></script>
<script src="./view_para.js"></script>
<style type="text/css">
#bal {
width: 48%;
border: 1px solid red;
padding: 1em;
}
#bal p {
display: none;
}
#bal p:nth-child(1) {
display: block;
}
#jobb {
width: 48%;
float: right;
}
</style>
</head>
<body>
<div id="jobb">
<form id="gombok">
<span>
<input type="button" name="previous" value="Előző">
<input type="button" class="toggle" href="#bal" name="next" value="Következő">
</span>
</form>
</div>
<div id="bal" class="sib">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
semper felis in nunc tincidunt lacinia. Aenean interdum,
lorem pretium maximus euismod, dolor tellus porta velit, sed
dapibus ex velit non ante. Morbi consequat rhoncus
erat, a laoreet felis commodo eget. Phasellus sed justo nibh.
Quisque ut felis malesuada, dictum erat vel, vehicula
nunc. Sed quis facilisis enim. Sed non magna nisl. Duis
pellentesque tempus mollis.</p>
<p>In ultrices mauris risus, ac blandit arcu vehicula vel. Mauris in
nulla nulla. Praesent dignissim justo at lorem
tempus molestie. Nunc interdum, justo non iaculis mollis, quam
ipsum mollis massa, id dignissim odio purus quis
ex. Ut a odio venenatis, malesuada diam et, blandit magna. Nam
scelerisque purus ut risus interdum, et vehicula
augue vestibulum. Proin mattis vehicula arcu, sit amet suscipit
velit malesuada sed. In hac habitasse platea
dictumst. Ut non laoreet dolor. Nunc pellentesque nulla at justo
maximus dignissim. </p>
<p>ellentesque convallis sapien eget tortor fermentum, nec consequat
lacus interdum. Sed id pulvinar risus, eu ornare
tellus. Morbi non ex magna. Nunc sed massa id dolor ultrices
consequat. Curabitur fermentum nibh quis sollicitudin
condimentum. Integer a quam vitae quam fringilla consectetur.
Donec vehicula, risus sed sagittis condimentum,
risus neque luctus mauris, accumsan consectetur lectus nisi id
tellus. Quisque eu sapien non lectus imperdiet
tincidunt consequat non metus. Nulla egestas iaculis arcu sed
elementum. Praesent pellentesque sem purus. Nulla
hendrerit leo lacus, sit amet sodales ante porttitor at. Fusce
dapibus laoreet dui, sit amet ornare odio mollis
non. In hac habitasse platea dictumst. Praesent non ex at nunc
ullamcorper interdum. </p>
<p>Duis tortor leo, ultricies quis placerat vel, scelerisque eu
augue. Duis est odio, interdum sit amet ullamcorper
eget, tincidunt et lectus. Aliquam erat volutpat. Donec tempus
porttitor consectetur. Pellentesque ac enim vestibulum,
eleifend arcu et, hendrerit ligula. Sed quis magna metus.
Quisque dignissim metus eget iaculis commodo.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus.
Vestibulum et est gravida, mattis arcu sed, ultricies
elit. Sed vitae nisi ac lacus tincidunt varius et eu augue.
Etiam ultrices nunc vitae lacinia sagittis. Curabitur
molestie ac tellus non porttitor. Suspendisse potenti. Praesent
facilisis semper iaculis. Sed justo enim, imperdiet
vitae aliquet id, tempor ut orci. Nunc sed risus arcu. In
imperdiet dui eget erat elementum egestas. Pellentesque
eget urna vitae nulla dapibus euismod. Curabitur nisl diam,
pretium id mi posuere, molestie gravida justo. </p>
</div>
However, this is not the way you should design your code for an easy task like this. I wrote a much simpler function that should do the task equally good.
var count = 0;
function bla() {
var num = document.querySelectorAll("div#bal p").length - 1;
if(count < 0) {
count = num;
} else if (count > num) {
count = 0;
}
var all = document.querySelectorAll("div p");
for (var i = 0; i < all.length; i++) {
all[i].style.display = "none";
}
document.querySelectorAll("div p")[count].style.display = "block";
}
div > p {
display: none;
}
div > p:first-child {
display: block;
}
<div>
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
</div>
<button onclick="bla(count++);">Next</button>
<button onclick="bla(count--);">Previous</button>
Even with your (not shortened) example this is easy to accomplish.
var count = 0;
function bla() {
var num = document.querySelectorAll("div#bal p").length - 1;
if (count < 0) {
count = num;
} else if (count > num) {
count = 0;
}
var all = document.querySelectorAll("div#bal p");
for (var i = 0; i < all.length; i++) {
all[i].style.display = "none";
}
document.querySelectorAll("div#bal p")[count].style.display = "block";
}
#bal {
width: 48%;
border: 1px solid red;
padding: 1em;
}
#bal p {
display: none;
}
#bal p:nth-child(1) {
display: block;
}
#jobb {
width: 48%;
float: right;
}
<div id="jobb">
<form id="gombok">
<span>
<input type="button" onclick="bla(count--)" name="previous" value="Előző">
<input type="button" onclick="bla(count++)" class="toggle" href="#bal" name="next" value="Következő">
</span>
</form>
</div>
<div id="bal" class="sib">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper felis in nunc tincidunt lacinia. Aenean interdum, lorem pretium maximus euismod, dolor tellus porta velit, sed dapibus ex velit non ante. Morbi consequat rhoncus erat, a laoreet felis
commodo eget. Phasellus sed justo nibh. Quisque ut felis malesuada, dictum erat vel, vehicula nunc. Sed quis facilisis enim. Sed non magna nisl. Duis pellentesque tempus mollis.</p>
<p>In ultrices mauris risus, ac blandit arcu vehicula vel. Mauris in nulla nulla. Praesent dignissim justo at lorem tempus molestie. Nunc interdum, justo non iaculis mollis, quam ipsum mollis massa, id dignissim odio purus quis ex. Ut a odio venenatis,
malesuada diam et, blandit magna. Nam scelerisque purus ut risus interdum, et vehicula augue vestibulum. Proin mattis vehicula arcu, sit amet suscipit velit malesuada sed. In hac habitasse platea dictumst. Ut non laoreet dolor. Nunc pellentesque nulla
at justo maximus dignissim. </p>
<p>ellentesque convallis sapien eget tortor fermentum, nec consequat lacus interdum. Sed id pulvinar risus, eu ornare tellus. Morbi non ex magna. Nunc sed massa id dolor ultrices consequat. Curabitur fermentum nibh quis sollicitudin condimentum. Integer
a quam vitae quam fringilla consectetur. Donec vehicula, risus sed sagittis condimentum, risus neque luctus mauris, accumsan consectetur lectus nisi id tellus. Quisque eu sapien non lectus imperdiet tincidunt consequat non metus. Nulla egestas iaculis
arcu sed elementum. Praesent pellentesque sem purus. Nulla hendrerit leo lacus, sit amet sodales ante porttitor at. Fusce dapibus laoreet dui, sit amet ornare odio mollis non. In hac habitasse platea dictumst. Praesent non ex at nunc ullamcorper interdum.
</p>
<p>Duis tortor leo, ultricies quis placerat vel, scelerisque eu augue. Duis est odio, interdum sit amet ullamcorper eget, tincidunt et lectus. Aliquam erat volutpat. Donec tempus porttitor consectetur. Pellentesque ac enim vestibulum, eleifend arcu et,
hendrerit ligula. Sed quis magna metus. Quisque dignissim metus eget iaculis commodo.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum et est gravida, mattis arcu sed, ultricies elit. Sed vitae nisi ac lacus tincidunt varius et eu augue. Etiam ultrices nunc vitae lacinia sagittis. Curabitur molestie ac tellus
non porttitor. Suspendisse potenti. Praesent facilisis semper iaculis. Sed justo enim, imperdiet vitae aliquet id, tempor ut orci. Nunc sed risus arcu. In imperdiet dui eget erat elementum egestas. Pellentesque eget urna vitae nulla dapibus euismod.
Curabitur nisl diam, pretium id mi posuere, molestie gravida justo. </p>
</div>
I think you have a couple of issues.
Using childNodes rather than children. As you're trying to set style on them, you need to use children to get elements rather than nodes. See here.
if(!content) return;, you need to check if "next" exists, rather than content, as on the last paragraph content will exist when next doesn't
var show = function (elem){
elem.style.display = 'block';
};
var hide = function (elem){
elem.style.display = 'none';
}
var toggle = function(elem, next){
if (window.getComputedStyle(elem).display === 'block'){
hide(elem);
show(next);
return;
}
};
var count = 0;
document.addEventListener('click', function(event){
if (!event.target.classList.contains('toggle')) return;
event.preventDefault();
var e = document.getElementById("bal");
var content = e.children[count];
count++;
var next = e.children[count];
if(!next) return;
toggle(content, next);
}, false);
<!DOCTYPE html>
<html lang="hu">
<head>
<title>JS példák</title>
<meta charset="utf-8">
<meta name="description" content="JavaScript példák">
<script src="utils.js"></script>
<script src="./view_para.js"></script>
<style type="text/css">
#bal {
width: 48%;
border: 1px solid red;
padding: 1em;
}
#bal p {
display: none;
}
#bal p:nth-child(1) {
display: block;
}
#jobb {
width: 48%;
float: right;
}
</style>
</head>
<body>
<div id="jobb">
<form id="gombok">
<span>
<input type="button" name="previous" value="Előző">
<input type="button" class="toggle" href="#bal" name="next" value="Következő">
</span>
</form>
</div>
<div id="bal" class="sib">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
semper felis in nunc tincidunt lacinia. Aenean interdum,
lorem pretium maximus euismod, dolor tellus porta velit, sed
dapibus ex velit non ante. Morbi consequat rhoncus
erat, a laoreet felis commodo eget. Phasellus sed justo nibh.
Quisque ut felis malesuada, dictum erat vel, vehicula
nunc. Sed quis facilisis enim. Sed non magna nisl. Duis
pellentesque tempus mollis.</p>
<p>In ultrices mauris risus, ac blandit arcu vehicula vel. Mauris in
nulla nulla. Praesent dignissim justo at lorem
tempus molestie. Nunc interdum, justo non iaculis mollis, quam
ipsum mollis massa, id dignissim odio purus quis
ex. Ut a odio venenatis, malesuada diam et, blandit magna. Nam
scelerisque purus ut risus interdum, et vehicula
augue vestibulum. Proin mattis vehicula arcu, sit amet suscipit
velit malesuada sed. In hac habitasse platea
dictumst. Ut non laoreet dolor. Nunc pellentesque nulla at justo
maximus dignissim. </p>
<p>ellentesque convallis sapien eget tortor fermentum, nec consequat
lacus interdum. Sed id pulvinar risus, eu ornare
tellus. Morbi non ex magna. Nunc sed massa id dolor ultrices
consequat. Curabitur fermentum nibh quis sollicitudin
condimentum. Integer a quam vitae quam fringilla consectetur.
Donec vehicula, risus sed sagittis condimentum,
risus neque luctus mauris, accumsan consectetur lectus nisi id
tellus. Quisque eu sapien non lectus imperdiet
tincidunt consequat non metus. Nulla egestas iaculis arcu sed
elementum. Praesent pellentesque sem purus. Nulla
hendrerit leo lacus, sit amet sodales ante porttitor at. Fusce
dapibus laoreet dui, sit amet ornare odio mollis
non. In hac habitasse platea dictumst. Praesent non ex at nunc
ullamcorper interdum. </p>
<p>Duis tortor leo, ultricies quis placerat vel, scelerisque eu
augue. Duis est odio, interdum sit amet ullamcorper
eget, tincidunt et lectus. Aliquam erat volutpat. Donec tempus
porttitor consectetur. Pellentesque ac enim vestibulum,
eleifend arcu et, hendrerit ligula. Sed quis magna metus.
Quisque dignissim metus eget iaculis commodo.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus.
Vestibulum et est gravida, mattis arcu sed, ultricies
elit. Sed vitae nisi ac lacus tincidunt varius et eu augue.
Etiam ultrices nunc vitae lacinia sagittis. Curabitur
molestie ac tellus non porttitor. Suspendisse potenti. Praesent
facilisis semper iaculis. Sed justo enim, imperdiet
vitae aliquet id, tempor ut orci. Nunc sed risus arcu. In
imperdiet dui eget erat elementum egestas. Pellentesque
eget urna vitae nulla dapibus euismod. Curabitur nisl diam,
pretium id mi posuere, molestie gravida justo. </p>
</div>
(function() {
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var block = document.getElementById("block");
var paragraphs = block.getElementsByTagName("p");
var activeParagraphIndex = 0;
var paragraphsCount = paragraphs.length;
var show = function (elem){
elem.style.display = 'block';
};
var hide = function (elem){
elem.style.display = 'none';
}
var toggle = function(elem, next){
if (window.getComputedStyle(elem).display === 'block'){
hide(elem);
show(next);
return;
}
};
next.addEventListener('click', function(event){
var prev = paragraphs[activeParagraphIndex];
activeParagraphIndex++;
if(activeParagraphIndex === paragraphsCount) {
activeParagraphIndex = 0;
}
var next = paragraphs[activeParagraphIndex];
toggle(prev,next);
}, false);
prev.addEventListener('click', function(event){
var prev = paragraphs[activeParagraphIndex];
activeParagraphIndex--;
if(activeParagraphIndex === -1) {
activeParagraphIndex = paragraphsCount - 1;
}
var next = paragraphs[activeParagraphIndex];
toggle(prev,next);
}, false);
})();
#block p:not(:first-child) {
display:none;
}
<div id="block">
<p>My first paragraph.</p>
<p>My Second paragraph.</p>
<p>My Third paragraph.</p>
<p>My Fourth paragraph.</p>
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
This code works for n paragraphs. You can add as many as you want.

How to improve this javascript elevator / parallax / pin-it element function

I was researching through the world wide web for a javascript function ”pin parallax scroll event” or whatever you’d like to call it.
Scrollmagic has a solution of this, but it has a set value. Many times you wont know the actual height of the content.
Couldn't find a solution that was fitting my needs so I built my own in jQuery.
Althought my solution isn't perfect. When the scroll-event is fired, it feels laggy and you can see the elevator-element being moved for a tiny moment (during like 200ms).
Anyone has a clue how to improve this?
$(window).scroll(function (){
var currentPos = $(document).scrollTop(); // Our current position
console.log(currentPos); //So we can se our current position in the console
var targetElemTopPos = $("#elevator .right").offset().top; //Value of our targets top position
var targetElemenBotPos = $("#elevator .right").outerHeight(); //Total of our targets height
var targetLeftBosPos = $("#elevator .left").outerHeight(); //Total value of our elevator
var amountOfTop = targetElemenBotPos - targetLeftBosPos; //Calc the difference from sections top to elevators top
//The elevator algorithm
if ( (currentPos > targetElemTopPos) && (currentPos < targetElemenBotPos) ) {
//If the current position is greater than targets top position
//AND if the current position is less than targets bottom position
//Start the elevator
console.log('Elevator in movement');
$('#elevator .left').addClass('fixed');
$( '#elevator .left' ).css( 'top', 0 );
} else if (currentPos > targetElemTopPos) {
//Howeaver if the current position is greater than targets bottom position
// Stop the elevator and push it down so we can take the elevator up later if we want to
console.log('Elevator has reached the destination');
$('#elevator .left').removeClass('fixed');
$( '#elevator .left' ).css( 'top', amountOfTop );
} else {
//Else just let the elevator wait on a passanger
console.log('Elevator on standby');
$('#elevator .left').removeClass('fixed');
$( '#elevator .left' ).css( 'top', 0 );
}
});
https://codepen.io/jeffdesign/pen/jBOdgE
(The lagg is more obvious in full-screen and in Safari)
I'm not into JQuery but you could try this vanilla code:
It alsow handles the case when the content height of the sticky element is bigger than the screen and only uses one scroll listener for multiple instances.
(function(global, document, undefined) {
'use strict';
const SCROLL_DIRECTION = {
UP: -1,
DOWN: 1
};
var ticking = false;
var currentScrollPosition = 0;
var lastScrollPosition = 0;
var scrollDirection = 1;
var stickies = [];
function StickyScroll(selector, options) {
var self = this;
var target = null;
var parent = null;
options = options || {};
options = Object.assign({}, self.defaults, options);
target = document.querySelector(selector);
if(!target) return;
self.targetSnapshot = target.getBoundingClientRect();
parent = target.parentNode;
if(options.boundTo) {
parent = document.querySelector(options.boundTo);
}
self.uid = StickyScroll.UID++;
self.target = target;
self.parent = parent;
self.options = options;
stickies[self.uid] = self;
}
StickyScroll.UID = 0;
StickyScroll.prototype.defaults = {
boundTo: null,
directionOffset: 50
}
StickyScroll.prototype.update = function() {
var targetRect = this.target.getBoundingClientRect();
var parentRect = this.parent.getBoundingClientRect();
var targetHeight = targetRect.height;
var targetBottom = currentScrollPosition + targetHeight;
var parentHeight = parentRect.height;
var parentTop = this.parent.offsetTop;
if(currentScrollPosition > lastScrollPosition + this.options.directionOffset) {
scrollDirection = SCROLL_DIRECTION.DOWN;
lastScrollPosition = currentScrollPosition;
} else if(currentScrollPosition < lastScrollPosition - this.options.directionOffset) {
scrollDirection = SCROLL_DIRECTION.UP;
lastScrollPosition = currentScrollPosition;
}
if(currentScrollPosition > parentTop && targetBottom < parentHeight + parentTop) {
this.target.style.height = targetHeight + 'px';
this.target.style.position = 'fixed';
if(scrollDirection === SCROLL_DIRECTION.DOWN) {
this.target.style.top = 0 + 'px';
this.target.style.bottom = null;
}
else {
this.target.style.top = null;
this.target.style.bottom = 0 + 'px';
}
} else if(targetBottom >= parentHeight + parentTop) {
this.target.style.position = 'absolute';
this.target.style.top = null;
this.target.style.bottom = 0;
this.parent.style.position = 'relative';
} else {
this.parent.style.position = null;
this.target.style.position = null;
this.target.style.top = null;
this.target.style.bottom = null;
}
ticking = false;
}
global.addEventListener('scroll', function(event) {
stickies.forEach(function(sticky) {
if (!ticking) {
currentScrollPosition = document.body.scrollTop;
window.requestAnimationFrame(sticky.update.bind(sticky));
ticking = true;
}
});
});
global.StickyScroll = StickyScroll;
})(window, document)
let x = new StickyScroll('#elevator .left'); // init
let y = new StickyScroll('#dd'); // should not init
body, html, h1, h2, h3, p {
padding: 0;
margin: 0;
font-family: sans-serif;
}
header {
background-color: #1abc9c;
}
header h1 {
color: #fff;
text-align: center;
font-size: 4em;
text-align: center;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#elevator {
overflow: hidden;
}
#elevator .left {
background-color: #e67e22;
width: 50%;
color: #fff;
text-align: center;
float: left;
height: 150vh;
}
#elevator .left h2 {
font-size: 2em;
text-align: center;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#elevator .right {
background-color: #34495e;
width: 50%;
color: #fff;
float: right;
line-height: 2em;
}
#elevator .right p {
padding: 2em;
}
footer {
min-height: 1200px;
background-color: #1abc9c;
clear: both;
text-align: center;
padding: 2em;
}
footer h1 {
color: #fff;
text-align: center;
padding: 250px 0;
font-size: 4em;
}
footer p {
line-height: 2em;
color: #fff;
}
.fixed {
position: fixed !important;
}
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header class="100vh">
<h1>I am a header</h1>
</header>
<section id="elevator">
<div class="left 100vh">
<h2>I am Mr. Elevator</h2>
</div>
<div class="right">
<p>Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<p>Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<p>Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<p>Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<p>Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<p>Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<p>Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<p>Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>
</section>
<footer>
<h1>I am bigfooter</h1>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</footer>
</body>
</html>
I found the problem.
When you do use "greater than" and "less than" in if/ifelse/else the condition wont be true when the value equals the current value. So the solution was quite easy.
All I did was edit from:
if ( (currentPos > targetElemTopPos) && (currentPos < targetElemenBotPos) )
To:
if ( (currentPos >= targetElemTopPos) && (currentPos <= targetElemenBotPos) )
And same on the rest of the function.

dynamically change value on resize and window scroll

I have a fixed header function like below. I would like to change dynamically "100" value while window resizing.
I was trying to wrap everything in sth like "if (screen.width >= 1200)" or "jQuery(window).on('resize', function ()" but this kind of stuff is working only with page refresh.
jQuery(document).ready(function($) {
var $window = $(window),
$stickyEl = $('.tabsmenu > ul'),
elTop = $stickyEl.offset().top - 100;
$window.scroll(function() {
if ($window.scrollTop() < 900) {
$stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
} else {
$stickyEl.removeClass('sticky');
}
});
});
Any tips?
This may not be perfect but it's what I think what you want to do and the way I would do it. This just gets the scroll value and then does some math to calculate how much it needs to change. I have added a bunch of content to let it scroll.
window.onload = function() {
$("#everything").scroll(function() {
var startAt = 40; //How many pixles scrolled to start effect, 0 would match link
if ($("#everything").scrollTop() >= startAt) {
var scroll = $("#everything").scrollTop(),
total = 0, // go to this value
distance = 40, //distance to shrink
value = (scroll < distance) ? total : total + (distance - (scroll - startAt));
$("#head").css("height", value); //change #head to what ever you want to shrink
} else {
$("#head").css("background-color", value);
}
});
}
html,
body {
overflow: hidden;
/* Disables regular scrolling */
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#everything {
overflow: scroll;
/* enables content to scroll */
position: relative;
width: 100%;
height: 100%;
padding-top: 40px;
}
#head {
width: 100%;
height: 40px;
background-color: red;
position: fixed;
top: 0px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="everything">
<div id="head">header</div>
<span>
Text Following text is so the page can scroll: <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta velit eu turpis imperdiet congue. Morbi nec mi ipsum. Nam eu nunc in lorem sagittis feugiat a quis nisl. Donec suscipit leo quis magna egestas, id convallis leo gravida. Curabitur finibus lectus ut metus feugiat, eu tincidunt eros tempor. Fusce facilisis nunc vulputate, posuere velit nec, ultrices diam. Vestibulum aliquam velit in lectus imperdiet, vitae condimentum lectus finibus. Aliquam ac arcu eget velit molestie rhoncus. Etiam rhoncus, tellus nec lacinia porta, diam lorem ultrices sem, et dignissim ipsum augue non augue. Suspendisse tincidunt felis sit amet orci accumsan, at ornare tellus viverra. Nam viverra nulla in urna elementum ornare.Sed interdum nisi libero, id porta turpis consectetur vitae. Curabitur nunc ex, interdum eget hendrerit maximus, faucibus non est. Etiam scelerisque condimentum eleifend. Integer ac ligula eget magna porta tristique at eu neque. Sed venenatis ipsum non metus sodales finibus. Suspendisse nec nunc lobortis ligula venenatis tristique. Suspendisse aliquam leo elit, et pretium ipsum tempor sed. Maecenas tincidunt dictum leo sit amet accumsan. Nullam eu viverra nulla. Aenean vehicula tellus a mauris malesuada interdum. Sed libero lacus, consectetur at condimentum vel, egestas vitae nisl.Mauris facilisis tincidunt magna, at gravida elit. Cras molestie eros sed tincidunt ultricies. Pellentesque eleifend egestas orci, sit amet condimentum nisl semper eleifend. Sed ipsum elit, aliquet nec lacinia a, maximus eu dolor. Quisque finibus efficitur odio gravida convallis. Vivamus nec velit in est ornare luctus at a risus. In hac habitasse platea dictumst. Proin condimentum eget est non posuere. Vivamus ante quam, bibendum in tincidunt ut, egestas sed mauris. Nunc non interdum nibh, nec ornare tellus. In interdum elit nisi, a interdum est tempor id. Cras a elit ut purus ornare mollis sit amet ut est. Cras ut ex sed neque lacinia accumsan quis aliquet turpis. Quisque nisl nunc, pretium sed lectus pretium, lacinia ornare magna. Curabitur sit amet felis turpis. Morbi nisi mi, mattis quis tempor ut, accumsan nec ex.
</span>
</div>
</body>
</html>

menu current and hover effect

i m trying to get a menu current animation so i make that :
$(document).ready(function() {
$('.menu li:eq(0)').addClass('current');
$('.menu').onePageNav();
});
// JavaScript Document
/*
* jQuery One Page Nav Plugin
* http://github.com/davist11/jQuery-One-Page-Nav
*
* Copyright (c) 2010 Trevor Davis (http://trevordavis.net)
* Dual licensed under the MIT and GPL licenses.
* Uses the same license as jQuery, see:
* http://jquery.org/license
*
* #version 3.0.0
*
* Example usage:
* $('#nav').onePageNav({
* currentClass: 'current',
* changeHash: false,
* scrollSpeed: 750
* });
*/
;(function($, window, document, undefined){
// our plugin constructor
var OnePageNav = function(elem, options){
this.elem = elem;
this.$elem = $(elem);
this.options = options;
this.metadata = this.$elem.data('plugin-options');
this.$win = $(window);
this.sections = {};
this.didScroll = false;
this.$doc = $(document);
this.docHeight = this.$doc.height();
};
// the plugin prototype
OnePageNav.prototype = {
defaults: {
navItems: 'a',
currentClass: 'current',
changeHash: false,
easing: 'swing',
filter: '',
scrollSpeed: 750,
scrollThreshold: 0.5,
begin: false,
end: false,
scrollChange: false
},
init: function() {
// Introduce defaults that can be extended either
// globally or using an object literal.
this.config = $.extend({}, this.defaults, this.options, this.metadata);
this.$nav = this.$elem.find(this.config.navItems);
//Filter any links out of the nav
if(this.config.filter !== '') {
this.$nav = this.$nav.filter(this.config.filter);
}
//Handle clicks on the nav
this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this));
//Get the section positions
this.getPositions();
//Handle scroll changes
this.bindInterval();
//Update the positions on resize too
this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this));
return this;
},
adjustNav: function(self, $parent) {
self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
$parent.addClass(self.config.currentClass);
},
bindInterval: function() {
var self = this;
var docHeight;
self.$win.on('scroll.onePageNav', function() {
self.didScroll = true;
});
self.t = setInterval(function() {
docHeight = self.$doc.height();
//If it was scrolled
if(self.didScroll) {
self.didScroll = false;
self.scrollChange();
}
//If the document height changes
if(docHeight !== self.docHeight) {
self.docHeight = docHeight;
self.getPositions();
}
}, 250);
},
getHash: function($link) {
return $link.attr('href').split('#')[1];
},
getPositions: function() {
var self = this;
var linkHref;
var topPos;
var $target;
self.$nav.each(function() {
linkHref = self.getHash($(this));
$target = $('#' + linkHref);
if($target.length) {
topPos = $target.offset().top;
self.sections[linkHref] = Math.round(topPos);
}
});
},
getSection: function(windowPos) {
var returnValue = null;
var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold);
for(var section in this.sections) {
if((this.sections[section] - windowHeight) < windowPos) {
returnValue = section;
}
}
return returnValue;
},
handleClick: function(e) {
var self = this;
var $link = $(e.currentTarget);
var $parent = $link.parent();
var newLoc = '#' + self.getHash($link);
if(!$parent.hasClass(self.config.currentClass)) {
//Start callback
if(self.config.begin) {
self.config.begin();
}
//Change the highlighted nav item
self.adjustNav(self, $parent);
//Removing the auto-adjust on scroll
self.unbindInterval();
//Scroll to the correct position
self.scrollTo(newLoc, function() {
//Do we need to change the hash?
if(self.config.changeHash) {
window.location.hash = newLoc;
}
//Add the auto-adjust on scroll back in
self.bindInterval();
//End callback
if(self.config.end) {
self.config.end();
}
});
}
e.preventDefault();
},
scrollChange: function() {
var windowTop = this.$win.scrollTop();
var position = this.getSection(windowTop);
var $parent;
//If the position is set
if(position !== null) {
$parent = this.$elem.find('a[href$="#' + position + '"]').parent();
//If it's not already the current section
if(!$parent.hasClass(this.config.currentClass)) {
//Change the highlighted nav item
this.adjustNav(this, $parent);
//If there is a scrollChange callback
if(this.config.scrollChange) {
this.config.scrollChange($parent);
}
}
}
},
scrollTo: function(target, callback) {
var offset = $(target).offset().top;
$('html, body').animate({
scrollTop: offset
}, this.config.scrollSpeed, this.config.easing, callback);
},
unbindInterval: function() {
clearInterval(this.t);
this.$win.unbind('scroll.onePageNav');
}
};
OnePageNav.defaults = OnePageNav.prototype.defaults;
$.fn.onePageNav = function(options) {
return this.each(function() {
new OnePageNav(this, options).init();
});
};
})( jQuery, window , document );
/*------menu------ */
.menu {
margin-top: 11%;
position:fixed;
width: 50%;
right: -25%;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
z-index: 9999;
margin-right: 20px;
}
.menu li {
display: inline;
text-align: center;
}
#verti {
display: inline-block;
width: 25%;
padding: 20px 0 10px 0;
margin: 0;
text-decoration: none;
color: #333;
}
.one.current ~ hr {
margin-left: 0%;
}
.two.current ~ hr {
margin-left: 25%;
}
.three.current ~ hr {
margin-left: 50%;
}
.four.current ~ hr {
margin-left: 75%;
}
.one:hover ~ hr {
margin-left: 0%;
}
.two:hover ~ hr {
margin-left: 25%;
}
.three:hover ~ hr {
margin-left: 50%;
}
.four:hover ~ hr {
margin-left: 75%;
}
.menu hr {
height: .15rem;
width: 25%;
margin: 0;
background: rgba(0,0,0,1);
border: none;
transition: .3s ease-in-out;
}
/*------menu fin------ */
div {
margin: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
<li class="one"><a id="verti" href="#home">home</a></li><!--
--><li class="two"><a id="verti" href="#work">work</a></li><!--
--><li class="three"><a id="verti" href="#about">about</a></li><!--
--><li class="four"><a id="verti" href="#contact">contact</a></li>
<hr />
</ul>
<div id="home" class="point">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit lectus a nisl consectetur fermentum. Nam dictum posuere ligula. Vestibulum lacinia imperdiet justo sit amet placerat. Duis maximus, magna dapibus viverra suscipit, neque quam bibendum massa, ut consectetur leo leo eget lectus. Donec sit amet placerat orci. Sed a elit ac magna faucibus bibendum. Integer pretium eros quis pulvinar egestas. Aenean interdum posuere ante, vel lobortis diam consectetur sed.
Vivamus sit amet velit et nulla pharetra malesuada ut sed ex. Cras tincidunt aliquet ipsum, at vehicula nibh venenatis eget. In eget mauris fermentum, congue mi sed, venenatis ipsum. Curabitur vitae ipsum sem. Praesent ac bibendum risus. Cras sapien nisl, fringilla at accumsan sit amet, fringilla a ante. Cras quam eros, consequat nec tristique sed, ultricies in metus. Maecenas aliquet vel arcu ut volutpat. Vivamus et neque iaculis neque bibendum ornare. Nunc pulvinar, ligula et congue laoreet, ipsum lectus congue tortor, eu posuere nulla purus id risus. Integer justo risus, volutpat maximus vestibulum a, sodales hendrerit nisi. Nunc non ullamcorper quam.
</div>
<div id="work" class="point">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit lectus a nisl consectetur fermentum. Nam dictum posuere ligula. Vestibulum lacinia imperdiet justo sit amet placerat. Duis maximus, magna dapibus viverra suscipit, neque quam bibendum massa, ut consectetur leo leo eget lectus. Donec sit amet placerat orci. Sed a elit ac magna faucibus bibendum. Integer pretium eros quis pulvinar egestas. Aenean interdum posuere ante, vel lobortis diam consectetur sed.
Vivamus sit amet velit et nulla pharetra malesuada ut sed ex. Cras tincidunt aliquet ipsum, at vehicula nibh venenatis eget. In eget mauris fermentum, congue mi sed, venenatis ipsum. Curabitur vitae ipsum sem. Praesent ac bibendum risus. Cras sapien nisl, fringilla at accumsan sit amet, fringilla a ante. Cras quam eros, consequat nec tristique sed, ultricies in metus. Maecenas aliquet vel arcu ut volutpat. Vivamus et neque iaculis neque bibendum ornare. Nunc pulvinar, ligula et congue laoreet, ipsum lectus congue tortor, eu posuere nulla purus id risus. Integer justo risus, volutpat maximus vestibulum a, sodales hendrerit nisi. Nunc non ullamcorper quam.
Aliquam vehicula bibendum elit, quis vestibulum velit. Maecenas ut convallis nisi, ut ultricies ex. Donec semper ex id dui maximus, in interdum turpis vehicula. Sed non ultricies eros, et pretium lorem. Donec ac tortor justo. Curabitur vel sem metus. Nam quis bibendum ipsum. Donec ac magna non nulla euismod dapibus posuere fringilla velit. In elementum mauris gravida rutrum fringilla. Nulla facilisi. Praesent eu tortor interdum, iaculis elit id, tempus augue. Nunc quis arcu nec erat pharetra sodales et a enim. Donec sit amet odio vitae eros ultrices finibus ac nec nunc.
In feugiat nunc at rhoncus vestibulum. Donec blandit id risus eget consectetur. Vestibulum ac felis iaculis, maximus turpis vel, hendrerit eros. Sed sagittis erat eu ante vestibulum efficitur. Proin viverra, ligula at luctus molestie, eros urna lobortis lectus, ut fringilla odio velit a sapien. Sed ultricies ultrices tellus a facilisis. Nam viverra arcu vel purus tempus tristique. Phasellus quis pellentesque arcu, at tincidunt dui. Curabitur imperdiet lorem vel rhoncus imperdiet. Curabitur lacinia purus non lectus posuere consectetur. Ut interdum varius arcu, ac aliquet mi auctor volutpat. Curabitur quam ante, vehicula a nulla quis, porta efficitur neque. Integer ut ornare nulla. Nulla consequat, dui eget luctus placerat, turpis metus ultricies magna, a pulvinar justo mauris sit amet dui. Aliquam vestibulum malesuada sem, sit amet ultrices diam hendrerit a.
Nulla facilisi. Cras fermentum leo ligula, vitae tristique mi rutrum ac. Vivamus vitae ante eros. Praesent auctor eu leo non dictum. Praesent venenatis ut quam ut cursus. In hac habitasse platea dictumst. Phasellus iaculis, ex eu scelerisque aliquet, ligula nulla semper metus, sit amet molestie leo libero a nisi. Ut egestas orci vel lorem placerat sollicitudin nec congue justo.
</div>
<div id="about" class="point">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit lectus a nisl consectetur fermentum. Nam dictum posuere ligula. Vestibulum lacinia imperdiet justo sit amet placerat. Duis maximus, magna dapibus viverra suscipit, neque quam bibendum massa, ut consectetur leo leo eget lectus. Donec sit amet placerat orci. Sed a elit ac magna faucibus bibendum. Integer pretium eros quis pulvinar egestas. Aenean interdum posuere ante, vel lobortis diam consectetur sed.
Vivamus sit amet velit et nulla pharetra malesuada ut sed ex. Cras tincidunt aliquet ipsum, at vehicula nibh venenatis eget. In eget mauris fermentum, congue mi sed, venenatis ipsum. Curabitur vitae ipsum sem. Praesent ac bibendum risus. Cras sapien nisl, fringilla at accumsan sit amet, fringilla a ante. Cras quam eros, consequat nec tristique sed, ultricies in metus. Maecenas aliquet vel arcu ut volutpat. Vivamus et neque iaculis neque bibendum ornare. Nunc pulvinar, ligula et congue laoreet, ipsum lectus congue tortor, eu posuere nulla purus id risus. Integer justo risus, volutpat maximus vestibulum a, sodales hendrerit nisi. Nunc non ullamcorper quam.
Aliquam vehicula bibendum elit, quis vestibulum velit. Maecenas ut convallis nisi, ut ultricies ex. Donec semper ex id dui maximus, in interdum turpis vehicula. Sed non ultricies eros, et pretium lorem. Donec ac tortor justo. Curabitur vel sem metus. Nam quis bibendum ipsum. Donec ac magna non nulla euismod dapibus posuere fringilla velit. In elementum mauris gravida rutrum fringilla. Nulla facilisi. Praesent eu tortor interdum, iaculis elit id, tempus augue. Nunc quis arcu nec erat pharetra sodales et a enim. Donec sit amet odio vitae eros ultrices finibus ac nec nunc.
In feugiat nunc at rhoncus vestibulum. Donec blandit id risus eget consectetur. Vestibulum ac felis iaculis, maximus turpis vel, hendrerit eros. Sed sagittis erat eu ante vestibulum efficitur. Proin viverra, ligula at luctus molestie, eros urna lobortis lectus, ut fringilla odio velit a sapien. Sed ultricies ultrices tellus a facilisis. Nam viverra arcu vel purus tempus tristique. Phasellus quis pellentesque arcu, at tincidunt dui. Curabitur imperdiet lorem vel rhoncus imperdiet. Curabitur lacinia purus non lectus posuere consectetur. Ut interdum varius arcu, ac aliquet mi auctor volutpat. Curabitur quam ante, vehicula a nulla quis, porta efficitur neque. Integer ut ornare nulla. Nulla consequat, dui eget luctus placerat, turpis metus ultricies magna, a pulvinar justo mauris sit amet dui. Aliquam vestibulum malesuada sem, sit amet ultrices diam hendrerit a.
Nulla facilisi. Cras fermentum leo ligula, vitae tristique mi rutrum ac. Vivamus vitae ante eros. Praesent auctor eu leo non dictum. Praesent venenatis ut quam ut cursus. In hac habitasse platea dictumst. Phasellus iaculis, ex eu scelerisque aliquet, ligula nulla semper metus, sit amet molestie leo libero a nisi. Ut egestas orci vel lorem placerat sollicitudin nec congue justo.
</div>
<div id="contact" class="point">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit lectus a nisl consectetur fermentum. Nam dictum posuere ligula. Vestibulum lacinia imperdiet justo sit amet placerat. Duis maximus, magna dapibus viverra suscipit, neque quam bibendum massa, ut consectetur leo leo eget lectus. Donec sit amet placerat orci. Sed a elit ac magna faucibus bibendum. Integer pretium eros quis pulvinar egestas. Aenean interdum posuere ante, vel lobortis diam consectetur sed.
Vivamus sit amet velit et nulla pharetra malesuada ut sed ex. Cras tincidunt aliquet ipsum, at vehicula nibh venenatis eget. In eget mauris fermentum, congue mi sed, venenatis ipsum. Curabitur vitae ipsum sem. Praesent ac bibendum risus. Cras sapien nisl, fringilla at accumsan sit amet, fringilla a ante. Cras quam eros, consequat nec tristique sed, ultricies in metus. Maecenas aliquet vel arcu ut volutpat. Vivamus et neque iaculis neque bibendum ornare. Nunc pulvinar, ligula et congue laoreet, ipsum lectus congue tortor, eu posuere nulla purus id risus. Integer justo risus, volutpat maximus vestibulum a, sodales hendrerit nisi. Nunc non ullamcorper quam.
Aliquam vehicula bibendum elit, quis vestibulum velit. Maecenas ut convallis nisi, ut ultricies ex. Donec semper ex id dui maximus, in interdum turpis vehicula. Sed non ultricies eros, et pretium lorem. Donec ac tortor justo. Curabitur vel sem metus. Nam quis bibendum ipsum. Donec ac magna non nulla euismod dapibus posuere fringilla velit. In elementum mauris gravida rutrum fringilla. Nulla facilisi. Praesent eu tortor interdum, iaculis elit id, tempus augue. Nunc quis arcu nec erat pharetra sodales et a enim. Donec sit amet odio vitae eros ultrices finibus ac nec nunc.
In feugiat nunc at rhoncus vestibulum. Donec blandit id risus eget consectetur. Vestibulum ac felis iaculis, maximus turpis vel, hendrerit eros. Sed sagittis erat eu ante vestibulum efficitur. Proin viverra, ligula at luctus molestie, eros urna lobortis lectus, ut fringilla odio velit a sapien. Sed ultricies ultrices tellus a facilisis. Nam viverra arcu vel purus tempus tristique. Phasellus quis pellentesque arcu, at tincidunt dui. Curabitur imperdiet lorem vel rhoncus imperdiet. Curabitur lacinia purus non lectus posuere consectetur. Ut interdum varius arcu, ac aliquet mi auctor volutpat. Curabitur quam ante, vehicula a nulla quis, porta efficitur neque. Integer ut ornare nulla. Nulla consequat, dui eget luctus placerat, turpis metus ultricies magna, a pulvinar justo mauris sit amet dui. Aliquam vestibulum malesuada sem, sit amet ultrices diam hendrerit a.
Nulla facilisi. Cras fermentum leo ligula, vitae tristique mi rutrum ac. Vivamus vitae ante eros. Praesent auctor eu leo non dictum. Praesent venenatis ut quam ut cursus. In hac habitasse platea dictumst. Phasellus iaculis, ex eu scelerisque aliquet, ligula nulla semper metus, sit amet molestie leo libero a nisi. Ut egestas orci vel lorem placerat sollicitudin nec congue justo.
</div>
<footer>
</footer>
</section>
i want to make the opacity of the inactive menu at 0.4, the active one at 1 of course and i want that change in same time than the hr when the current event change and in hover too
someone have an idea ?
change the css from .menu li to:
.menu li {
display: inline;
text-align: center;
opacity: 0.4;
}
and add a new style for the .current class:
.current {
opacity: 1 !important;
}

Categories

Resources