Parallax background effect with ScrollTo and Localscroll - javascript

I have looked around for hours trying to figure this out. I have a site built up like this jsfiddle.
<div id="window">
<div id="section-wrapper">
<div id="one" class="section"><p>One</p>
</div>
<div id="two" class="section"><p>Two</p>
</div>
<div id="three" class="section"><p>Three</p>
</div>
<div id="four" class="section"><p>Four</p>
</div>
<div id="five" class="section"><p>Five</p>
</div>
<div id="six" class="section"><p>Six</p>
</div>
<div id="seven" class="section"><p>Seven</p>
</div>
<div id="eight" class="section"><p>Eight</p>
</div>
<div id="nine" class="section"><p>Nine</p>
</div>
</div>
I use ScrollTo and localscroll to navigate the site and I wonder how I can implement a parallax effect to the section wrapper and make the background move slower. Everywhere I look the parallax plugins and scripts is based on a scroll function, but since I dont use scroll to navigate I have no idea how to add the effect.
Is there a way to only adress the actual background-image, i.e. use .animate and/or .css to background-position property or should I put an element behind the section-wrapper? Im fairly new to jquery and javascript but if anyone could point me in the right direction i think i could figure it out. I have just have no idea where to start..

Attach this file to header of your site
https://github.com/markdalgleish/stellar.js/tree/master/src
initiate the script
<script type='text/javascript'>
<!--
(function($) {
$(document).ready(function() {
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
})(jQuery);
// -->
</script>
now you need to add the tag below to div that wraps the background
<div data-stellar-background-ratio="0.5">
You can update the value 0.5 - it defines the speed of background image.

Related

jQuery & fullPage.js - Not working in mobile

I am creating a site with the fullPage.js plugin. I got it to work on the desktop browser but it's not working as expected in mobile.
this is my HTML
<div id="fullpage">
<section id="red" class="section"></section>
<section id="blue" class="section"></section>
<section id="green" class="section"></section>
</div>
and this is my jquery
$(document).ready(function(){
$('#fullpage').fullpage({
navigation: true,
});
});
while navigation:true I can skip (i wouldn't say scroll) to different sections by touching the navigation dots. I can swipe to scroll up from there as seen in this video. it works in the chrome device emulator though
video of scroll in the works
P.S. I don't think scrollOverflow:true would serve my purpose as there is not much content to scroll in the site.
I figured out the problem. it was not with fullPage.js. In my HTML, I included jquery.slim.min.js instead of regular jquery.min.js
Apparently, fullPage.js only works with jquery.min.js
make it your code like this and try with that jquery
<div id="fullpage">
<div class="section">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>

Vertical Scrolling on Links with fullPage.js

I'm using the fullPage.js plugin to develop a project. The plugin works fine, but I have one question:
I have some sliders within a section so as to create vertical scrolling. However, within one slider I have different links that I also want to trigger vertical scrolling in the same way as the plugin does. Here's how my structure looks like:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide">
Example
...
</div>
<div class="slide" id="example"> Slide 3 </div>
</div>
</div>
So, just like I click on the arrows and the different sliders appear, is it possible to click on a link and then a specific slider to appear? The idea is that the Slide 3 will contain content that will change depending on the link that is clicked.

How to build text-only fadein/fadeout carousel in JS (Bootstrap-like)?

I'd like to implement a fade-in/fade-out text only carousel like on the header of this website.
I looked at the code and it seems that it was done with bootstrap.
Since I don't really want to implement the whole bootstrap thing only for this, is there a way to do something similar with a few lines of CSS and Javascript (Im a total newbie in JS)?
Many thanks for your help
HTML of the website I took as example:
<div id="carousel_fade_intro" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<h1>Multi-purpose template</h1>
</div>
<div class="item">
<h1>designed for portfolio, agency</h1>
</div>
<div class="item">
<h1>or landing page.</h1>
</div>
<div class="item">
<h1>It's easy to customize</h1>
</div>
<div class="item">
<h1>to fit any brand.</h1>
</div>
</div>
</div>
Look at jQuery's fadeIn and fadeOut methods.
http://api.jquery.com/fadein/
The example you linked toggles classes on each item in a loop and uses css transitions to control the fades.

Issues implementing simple 'toggle' / (show/hide) on div, on mouseclick, using JavaScript

So I'm trying to make a div class element toggle/ or show hide an set of id elements upon mouse click. So on click on the 'result_location id' I'm trying to display all the divs under result_menu class beneath it.
Am I going the right way about this? Hope you can help! Here's my HTML and JS code:
HTML:
<div id="result_location">
<h3>MainText Here</h3>
</div>
<div class="result_menu">
<div id="a_column">
<h4>text</h4>
</div>
<div id="b_column">
<h4>text</h4>
</div>
<div id="c_column">
<h4>text</h4>
</div>
<div id="d_column">
<h4>text</h4>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
$('#result_location').click(function() {
$('.result_menu').slideToggle("fast");
});
});
It appears to be working fine for me, I threw up a quick html page without a problem. Only thing I can think of is that you must load jquery before the JS that you mentioned. Other than that it should be working!

How can I link the scrolling of two divs that are dynamically loaded without using .on?

I would like to link the scrolling of the wrapper1 and wrapper2:
<div class="wrapper1">
<div class="div1">
</div>
</div>
<div class="wrapper2">
<div class="div2">
<div data-ng-class="{'hidden': loading!=0 }"
data-ng-form="gridForm">
<table class="form grid table" style="height: 600px; width: 1500px;">
</table>
</div>
</div>
</div>
The above is loaded dynamically and from what I have read I cannot use the .on jQuery method with scroll. So I would like to use something like this:
<div id="mydiv" onscroll='myMethod();'>
function myMethod(){ alert(1); }
Can someone give me some suggestions as to how I can make the scrolls work at the same time using the onscroll call and methods?
Please note that this is not a duplicate question to:
How can I get two scroll bars to scroll at the same time with jQuery and .on?

Categories