This is driving me NUTS!
Right, I've downloaded flickerplate's slideshow script and it's working 100% but if you go to the their website to view their demo, Click here you'll see that it has a parallax scroll effect. Now I want to use that parallax scroll effect too but they don't include it with their download (I initially thought the parallax scroll effect came with the slideshow).
So I've been spending HOURS and HOURS trying to locate the source code for this parallax scroll effect and for the life of me, I cannot find it! What makes it difficult is that they minify all their code so it's almost hopeless for person like me who isn't a javascript guru.
So I've had to resort to trying out a third party parallax scroll script Here and although I can get this script to work on a single image, I'm having no success implementing it into the flickerplate script (not surprisingly).
Here is the markup for the flickerplate script:
<div class="flicker-example" data-block-text="false">
<ul>
<li data-background="santa-maria-inhaca-island-mozambique-01.jpg"></li>
<li data-background="nhoxani-lodge-santa-maria-mozambique.jpg"></li>
<li data-background="santa-maria-accommodation-inhaca-island.jpg"></li>
</ul>
</div>
Here's the Markup for a SINGLE image using the Parallax script:
<div class="parallax-window" data-parallax="scroll" data-image-src="braby-villa-self-catering.jpg">
</div>
So obviously the problem is that this markup is per image (per ONE image), so I tried using it with the list items in the flickerplate markup above but that doesn't work - the image / background disappears. I'm assuming there's some conflict. This is the problem when trying to use a third party plugin with another.
What would probably be a lot easier is if I could find the same parallax scroll script that flickerplate used in their demo page, but I can't get any information on it ... maybe you can? I just want it like their demo page.
Related
everyone!
So, I'm trying to implement parallax with skrollr.js. This is my first attempt and I am pulling my hair out. I've been all over the web from searching Google, YouTube and StackOverflow. I'm trying to implement a parallax effect on a header image somewhat similar to this example except the image doesn't need to be the full height of the viewport and I only need one image to have a parallax effect. I'm going for something very similar to this on Squarespace's page.
I've been trying to simply use the code from the examples provided in the Skrollr.js repo. But after hours of failure, I turn to the trusty SO community!
Here is the page I have currently been testing the parallax header image on.
The classes .scollable-between and .scrollable-after are being altered on scroll but nothing is happening. Also, I am trying to implement this for mobile but I can't even scroll the page on mobile.
Any help is certainly appreciated! Thank you so much!
A couple issues:
First, position: fixed really doesn't play well with skrollr... whenever it is enabled on an element, the position relative to the scrolling element basically no longer exists, and skrollr events stop firing.
Second, it looks like the element with the background image (.parallax-image) is both being shown by the class '.skrollr-between' and also has a transform-3d property on it. When I disable the tranform3d property with the inspector, I can see the image.
It seems like you are combining two methods of parallax: Skrollr is one way of doing it via JavaScript, and CSS transforms are a way of doing it without Javascript... it would probably be best to chose one and roll with it.
Skrollr/JS method:
https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
CSS only method:
http://keithclark.co.uk/articles/pure-css-parallax-websites/
Please look at this website. as you see in some sections, when you scroll down the page, the actual page is not going down, only the elements and images start moving for taking some effect. I did my best to implement such thing but I failed how do I can implement such thing (specially taking the effect)?
A very nice site, and a very good example of Parallax Scrolling.
Achieving a site just like that is going to take a long time, but you can start by looking at some parallax sites here, to get an idea of the source code and look through some demo's.
I've read several posts about using jQuery to change the height based on the resizing of the browser window which involves watching the window size then updating the 'inline' style to a new height formulated from the width size. However all discovered solutions do not work since I need something similar but not the same, basically I want a inside element that resizes, sadly the content isn't images as this would be easier and saved me writing this post.
So the HTML code as you would expect to see looks something like this:
<header> </header>
<div class="mainbox">
<div class="custombar"> </div>
<div class="contentContainer">
<div class="contentOne"> </div>
<div class="contentTwo"> </div>
<div class="ContentThree"> </div>
</div>
<div class="contentFooter">
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
</div>
</div>
<footer> </footer>
CSS looks something like:
.header{height:135px;width:100%;background:#000;}
.mainbox{width:100%;height:500px;background:#ccc;}
.footer{height:135px;width:100%;background:#000;}
Now I'm aware of solutions for a fixed header, fixed bottom without the use of the position fixed but before someone jumps the gun I'm looking for an extended version that will support a little more what I'll explain in a moment.
This is where it gets complicated or least for me
Basiclly I want a jQuery script that will update the height based on the size of the browser window so that only one content div is ever visible so think 3 colors and as you scroll down you get another but I want it in a way so only 1 is ever visible, this can be done with offsetting and using a names I know this much but this wouldn't resize the window so that only one element is ever visible.
I've compiled some images in the hope this might explain what I'm after a little more...
Taking into account the following from the above image and in text form
Header always visible
Inner content will resize with browser
Nav links will always be visible even when scrolling
Footer always visible
Another example of the slides
As you can see from the above image the content will slide but most importantly resize and only one ever slide will be present by using go to and 100% height.
Width and Height Changing
It's pretty easy to throw a solution in if your willing have the user scroll and have the content cropping but the content is light and will work nicely with only 1 slide ever visible.
Understanding
I know at some point the content in the middle will become so small that it won't render correctly, this is no problem and I'll turn of the feature when it gets to X width using media queries, I appreciate everyone that contributes to helping in any shape of form and sorry if its a little board on the jQuery front, its not my strong point, I'm hoping that someone can wiz together a jFiddle or similar or point me in the direction in something already made.
There might be an easier approach to this problem like using min-height, any working method is appreciated. PS for the mammoth of all posts, it wasn't my intention ;)
I think you want something like this
only the content should scroll
JS Fiddle
you can give min-height for the div on resize
$('.container').css("min-height", '250px');
We are currently using Dojo to create a mobile map application. We're using Esri for the map service. Everything was working before changing from 3.2 to 3.3. The map works fine but I'm having issues implementing a base map gallery. I've done research for days trying to figure out why my gallery wasn't appearing but I've narrowed down my issue to it actually being the layout of my div tags. On my index.html page I have many div tags for different menu's and what not. I've followed all the div tags to make sure they've all been closed and they have.
So this is what I currently have implemented:
<div id="displayView" data-dojo-type="dojox.mobile.View">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props='fixed:"top", label:"Display Options", back:"Menu",
moveTo:"menuView"'>
<div id="galleryDiv"> </div>
</div>
</div>
With this code, the gallery doesn't show up, but if I move the closing div tags above the div id="galleryDiv" then it the gallery will show up, but it shows up on every page of the application because there is no ending div tag. Also, we were trying to implement buttons that would move the base map images in the gallery from left to right but they only work in google chrome. I wasn't sure why it would only work in Chrome and not any other browser.
I originally had a scrollable view in it but it wouldn't show up at all so I changed it to just mobile.view and it worked. Throughout the application it interchanges view and scrollable views, but from what I've researched, it should all work regardless.
After all the research I've done, I'm pretty sure it has to do with the parent/child relationship with the div tags but I'm not sure why it would keep my gallery from showing up on one page and why when I closed the div tags it shows up. However, if I close the div tag then the gallery shows up on EVERY page.
I appreciate any and all help, ideas, and comments! So... Any ideas?...
So what actually ended up being the problem is that the div tag inherited it's own height at 0px. Once we gave it a height, everything showed up just fine. Now why did it give it's own height 0? No idea. Either way, it works now!
Did you notice the scrolling trend bar on twitter home page.
What is the right way to do it with jquery? I hear jquery is better than javascript.
If you take a look at the source code, you can see the basic structure:
<div>
<div>
<ul>
<li>Year Without Rain</li>
<li>Gameday</li>
<li>etc...</li>
</ul>
</div>
<span class="fade fade-left"> </span>
<span class="fade fade-right"> </span>
</div>
The ul element is the list container containing the topics. The position of this element is animated to scroll it. When the scrolling list is about to come to the end, the contents of the list are appended to the end of the list (to simulate the list coming around and scrolling continuously). If this wasn't done, Twitter would probably have chosen to reverse the direction of the scroll. But how they did it is much nicer.
To get the fading effect, the .fade-left and .fade-right elements are used. They are aligned to the left and right, respectably. They are set to be transparent and the image itself is a transparent gradient: http://s.twimg.com/a/1283564528/images/fronts/fade-trends2.png. Using z-index, it is positioned over the scrolling list, thus giving a transparent effect on both sides.
Twitter does indeed use jQuery (but just so you know, jQuery is JavaScript, just a JavaScript framework) and I haven't taken the time to analyze the code, but it should be pretty straight forward to implement.
many options:
What's a good bit of JS or JQuery for horizontally scrolling news ticker
I recreated the twitter marquee check it out :Twitter marquee
I used raw javascript and automated it so that if you ad more links
it will calculate the width and know when to slice it and go back to zero