I'm writing a parallax website with waypoints.js and skrollr.js
and ran into a problem:
slide1 should scroll normal (vertical) and slide-2 should scroll horizontal once it's triggered (width: 4000px). But I have no idea how to do that. I know the new waypoints.js has horizontal:true but I'm kinda stuck right now. Has anyone an idea?
<section id="slide-1">
<div data-anchor-target="#slide-1">
<div class="Container">
<div class="Content">
<h2>Scroll this vertically</h2>
</div>
</div>
</div>
</section>
<section id="slide-2">
<div data-anchor-target="#slide-2">
<div class="Container">
<div class="Content">
<h2>Scroll this horizontal</h2>
</div>
</div>
</div>
</section>
<section id="slide-3">
<div data-anchor-target="#slide-3">
<div class="Container">
<div class="Content">
<h2>Scroll this vertically again</h2>
</div>
</div>
</div>
</section>
Maybe something like:
$('#slide-2').waypoint(function() {
//toogle #slide-2 width:4000px scroll horizontal:true etc.
;});
Related
I'm trying to transition between background colors in a single section so that when a specific section (.bg_container) hits the top of the viewport the background color starts starts to smooth transition while scrolling. I've seen many examples of very nice background fades/transitions but they all assume that each section has it's own color.
The issue here is that i have more colors than sections, so i can't tie the background color to sections.
<script>
var bg_colours = [
"#f0f0ff",
"#ff00ff",
"#0ff00f",
"#ffffff",
"#000000",
];
</script>
<div class="main">
<div class="header">
<span>lorum ipsom</span>
</div>
<div class="module_one">
<p>lorum ipsom</p>
</div>
<div class="module_two bg_container">
<div class="bg_section height_100_percent">
<div class="left_content">
<p>lorum ipsom</p>
</div>
<div class="right_content">
<p>lorum ipsom</p>
</div>
</div>
<div class="bg_section height_100_percent">
<div class="left_content">
<p>lorum ipsom</p>
</div>
<div class="right_content">
<p>lorum ipsom</p>
</div>
</div>
</div>
<div class="module_three">
<p>lorum ipsom</p>
</div>
<div class="footer">
<p>lorum ipsom</p>
</div>
</div>
in the above sample i want to transition the background color for bg_container using a color array.
Thank you for your time!
i'm using https://github.com/peachananr/purejs-onepage-scroll
i want final page 20% transform
example http://www.jqueryscript.net/demo/Smooth-One-Page-Scroll-Plugin-For-jQuery-SONP/
<body>
<div class="wrapper">
<div class="main">
<section class="page1">
<div class="page_container">
</div>
</section>
<section class="page2">
<div class="page_container">
</div>
</section>
<section class="page3"><!-- i want 20% transform -->
<div class="page_container">
</div>
</div>
</section>
I'm using scrollmagic to display content in a project I'm currently working on. The design I have uses 'wedges' at the top and bottom of the containers. I have managed to achieve the result that I want using an svg for the 'wedge' and by sticking the first one to the top of the page with a z-index: 1;
As a result this layer overlays the rest of the content that subsequently follows. Please see the codepen below.
http://codepen.io/oliver_randell/pen/MyLNON
I really need to be able to click the buttons in the promo boxes!
Any help would be greatly appreciated.
<section id="intro" class="intro">
<div class="content">
<div class="row">
<div class="medium-10 medium-offset-1 large-8 large-offset-2 columns">
<div class="fade-trigger"></div>
<h2>Intro title</h2>
<h3>Intro Subtitle</h3>
<p>Some extract text</p>
</div>
</div>
</div>
</section>
<section class="promo-boxes">
<!-- THIS IS WHERE THE TOP WEDGE NEEDS TO SIT -->
<div id="pinned-trigger1">
<div id="pinned-element1">
<div class="top-wedge"></div>
</div>
</div>
<!-- BOX 1 -->
<div id="pinned-trigger2" class="promo box1 full-screen">
<div id="pinned-element2">
<div class="wrapper">
<div class="content">
<div class="img-container">
<div class="img" style="background-image: url('https://unsplash.it/800/800');"></div>
</div>
<div class="text">
<div class="row">
<div class="large-4 large-offset-8 columns">
<div class="valign-middle">
<div>
<h3>Title</h3>
<p>Text</p>
Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pinned-trigger4" class="promo box3">
<div class="content">
<div class="img-container">
<div class="img" style="backgroundimage:url('img-link.png');">
</div>
</div>
<div class="text">
<div class="row">
<div class="large-4 large-offset-8 columns">
<div class="valign-middle">
<div>
<h3>Title</h3>
<p>Text</p>
Button 2
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pinned-element4">
<div class="bottom-wedge show-for-large"></div>
</div>
</div>
</section>
<section class="next-section full-screen">
<h2>this is the next section</h2>
</section>
So... I just added:
#pinned-trigger1 {
position-events: none;
}
And voila!!
Consider the following HTML:
<div id="members" class="main">
<section class="top">
<!-- Other Content -->
</section>
<section class="listing">
<div class="holder container">
<div class="row">
<div class="members-main col-sm-12">
<div class="members-head row">
</div>
</div>
</div>
</div>
</section>
</div>
Is there a way in JavaScript or jQuery that I can find out the amount of pixels between the start of the #members element and the start of the .members-head element?
offset().top gives you the top position of elements.
var distance = $('.members-head').offset().top - $('#members').offset().top;
alert("Distance is : " + distance)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="members" class="main">
<section class="top">
Other Content
</section>
<section class="listing">
<div class="holder container">
<div class="row">
<div class="members-main col-sm-12">
<div class="members-head row">
fdgfdgfdgdfgdfs
</div>
</div>
</div>
</div>
</section>
</div>
Try
$('.members-head').offset().top - $('#members').offset().top
Jquery offset
If you have multiple .members-head elements inside the #members one (as I suspect), you could try $('.members-head:first'), or loop through them with .each and do $(this).offset().top - $('#members').offset().top
try this
you will get.
$('#members').offset().top - $('.members-head').offset().top
I want the header to stick on scroll as shown here. (http://davist11.github.io/jQuery-Stickem/)
Source site (https://github.com/davist11/jQuery-Stickem)
I have a full screen video at the top of the page playing and I want to scroll and have the header stick when it hits it. Similarly there is a small border at the top on the other pages I want the scroll to miss then stick when it reaches this point.
Here is what it currently looks like
http://jsfiddle.net/wp7ornmv/
EDIT: Scroll on the HTML window
<div id="logo">
</div>
<div id="intro">
<video autoplay loop poster="images/work/bluesky.jpg" id="bgvid">
<source src="video/Peri_CloudLoop_BlueTV.webm" type="video/webm">
<source src="video/Peri_CloudLoop_BlueTV_3.mp4" type="video/mp4">
</video>
</div>
<div id="container">
<div id="content">
<div id="Mbackground">
<div id="Ncontainer">
<div id="Ncontain">
<div id="Nlogo">Logo
</div>
<div id="Nmenu">
<div class="Nlink">Contact
</div>
<div class="Nlink">About
</div>
<div class="Nlink">Work
</div>
</div>
</div>
</div>
</div>
<div id="Mbackground">
<div id="Mbody">
<div class="Mrow">
<div class="Mcontainer">
<a href="project.html" class="transition">
<span class="link-spanner"></span>
</a>
<div id="Mimageone" class="Mimage">
</div>
<div id="Mborderone" class="Mborder">
</div>
<div id="Mboxone" class="Mbox">
<div class="Mtext">
<div class="Mtitle">Title
</div>
<div class="Msubtitle">Subtitle
</div>
<div class="Mdescrip">Descript
</div>
</div>
<div class="Meye">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footerhalf1">
</div>
<div id="footerhalf2">
<div id="footercontents">Made by
</div>
</div>
</div>
This is a javascript supported behavior by stickem. You may find it HERE
Just make sure your container has a position relative and your sidebar has a position:fixed; top:0; left:auto and you will have it done.
This technique is quite common on websites running advertisements on a side panel. There is a lot more intricate information about this online and I assure you, using the source for the demo you provided along with the stickem jquery library, you will be done in no time.
Good luck