I am trying to create an effect where I have a logo broken up into several images and want to use a scrolling effect to piece the logo together. The problem I am having is that the page is not a scrolling page. Using CSS grid, half the page is the logo (starting with the outline of the logo) and the other half is a <h1> that describes about the piece of the logo. Each piece of the logo has a separate <h1> with a different title and changes when the user scrolls.
How can I use a scrolling effect to give the page a slideshow like presentation while piecing the logo into completion?
If you can share mockup or screenshot that will be helpful. What I understood in your description, you don't need the grid.
You can make the logo part as position: fixed
And then when you are scrolling your h1 tags, you can easily add animation to your logo. For this you can use javascript like the following code;
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
//do the first part merge
} else if(scroll >= 1000) {
//do the second part merge
} else {
//logo starting point
}
});
});
Also, for page scroll, I found a cool mini-library for you: https://github.com/CodyHouse/page-scroll-effects
*Crucial part is planning. You need to calculate when h1's finishing the scrolling and when their duplicate versions will start to merge with logo. You can also, make this process responsive and dynamic but it depends on your code. If you can share your code, we may help to convert it dynamic.
Related
Please, if somebody know, how to build main menu like on that webpage, can you help me?
I really like their menu, namely the fact that when you are scrolling down - it changes . And when you return to top again, its resets to original design. Thanks a lot.
I know how to create menu, edit it, etc. I do not know on what principle works switching of design.
Here we go:
You should do it with jQuery script like this:
This will change the page color to blue when you scroll more than 210px, and will revert back to red if you go back up:
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 210) {
$("#header_menu").css('background-color', 'blue');
} else {
$("#header_menu").css('background-color', 'red');
}
});
});
Or you can see there code source, open the web page and click right click mouse choose 'Explore'(Prozkoumat in czech language). Here you can watch how works it, it's easy:)
Hope it helps;)
The basic premise of the navigation you reference in your post is scrollTop() ( https://api.jquery.com/scrollTop/ ). The WordPress theme (Avia) used on your reference site has a jQuery function that does the following:
By default, add a class that applies the transparency effect.
'Listen' to the scroll position of the website and, if it is >50px remove the transparency class (allowing the default stylings to take effect). Re-apply the transparency class as needed.
Other than that it's a bit of CSS transition effects to make the change a bit smoother. This particular website relies on jQuery due to it being a WordPress installation, but you can achieve this same effect using any other JavaScript library (or in pure JS if you are so inclined).
I've set up a scrolling website (essentially a parallax-styled page, without the parallax effects) where each "page" is just a div that takes up 100% of the screen. But I need some sort of mechanism to 'lock' the scroll into the correct position so that the div will align properly with the user's browser.
If you need an example, Flickr's splash page does this perfectly.
Thanks.
EDIT: Here's a link to the site I'm working on. The code's a bit messy, and some images aren't loading (since they're not hosted yet) but it's there to give you a rough idea of how the site functions.
http://fiddle.jshell.net/99QjJ/
I just tried to build a fast solution: Fiddle
It prevents the normal scrolling and scrolls just to the appropriate offset of the divs:
if(!scrolling) {
scrolling = true;
currentDiv = (scrollDirection == "down" ? currentDiv + 1 : currentDiv - 1)
$("html,body").animate({
"scrollTop":offsets[currentDiv]
},{queue:true,duration:1000,complete:function() {
window.setTimeout(function() {
scrolling = false;
},200);
}});
It's no complete solution but I think this would work.
Another idea would be using one of the thousands of jQuery plugins which make the page scrollable via the arrow keys. I think if each of the divs fits the entire screen size there's no actual need for scrolling "in between".
So you're doing a 'one page' site, correct? Can't you use anchor tags on each element you want to jump to?
You can animate it to make it look pretty with this nice jQuery plugin
I am trying to build a gallery using the isotope plugin, and in that i am using masonryHorizontal layout. All the images are placed in an unordered list and under that i have li which further has an anchor tag and an image tag nested.
<ul>
<li><img src="#></li>
...
</ul>
The layout is working properly ie the images align themselves optimally leaving very less white spaces (done through isotope) but i want to have an animation when i scroll through horizontally.
I searched for a day and was not able to find anything substantial. Any help is appreciated.
I don't know your plugins. But if you are trying to detect sideways scroll with jQuery on the Page (Not some plugin specific scrolling) then give this a try:
var lastScrollLeft = 0;
$(window).scroll(function() {
var documentScrollLeft = $(document).scrollLeft();
if (lastScrollLeft != documentScrollLeft) {
console.log('scroll x');
lastScrollLeft = documentScrollLeft;
}
});
That should detect if the scrolling position is still the same. And then you can make changes accordingly.
If that is not what you meant by scroll. Then nevermind :)
The code snippet comes from this answer:
https://stackoverflow.com/a/7076832/3767100
I'd like to set up a "backward-compatible" scrolling sidebar on one of my pages.
I have a page containing information about a species of fish which can be extraordinarily long and images to accompany it.
The images are in the right-hand pane at the moment and I'd like them to follow the user as they scroll to the bottom of the page.
I've used the following code with some success:
jQuery().ready(function($) {
var $scrollingDiv = $("#sidebar");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );
});
});
But it jumps too far when scrolling down.
(original position)
(scrolled a single mousewheel click)
When you start scrolling down the page, the sidebar appears around half-way down and as such you can only see two of the images.
Once a user scrolls past X point (say 400px), I would like the sidebar to start moving with the page. However, it also needs to go back to its original position when the user reaches the top of the page once more.
Is there a fix that can be applied to this code, or a better way of approaching this?
---------------------------------------------------------------------------------
EDIT: position:fixed Problem
When I try to apply position:fixed as per Josh and David's suggestions (either bit of JS code), this happens:
Here is Firebug's read-out of the CSS styles attached to this element:
You can use a plugin for this, but it’s such a simple task that you might as well do it on your own.
Consider this simple markup:
<div id="content">Content</div>
<div id="sidebar"><div>Sidebar</div></div>
And this would be all the javascript you need:
var el = $('#sidebar'),
pos = el.position().top;
$(window).scroll(function() {
el.toggleClass('fixed', $(this).scrollTop() >= pos);
});
Now, it will add a class to the #sidebar div as soon as the user scroll further than the sidebar is positioned, so all you need now is som CSS. I’m applying the fixed positioning to a child element to avoid layout problems:
#sidebar.fixed > div{position:fixed;}
I put up a really simple demo here: http://jsfiddle.net/QZyH3/
You should try the jQuery code found in this tutorial, which replicates Apple's shopping cart sidebar. It has a working demo and a very small code footprint.
why not use css position: fixed; property? of course if you don't mind the div being not smooth but straightly following your scrollTop. I've found it not working only in IE6-- by today, so using fixed position is a good solution I think, otherwise you just get with window.scrollTop of DOM and assign it to your element's absolute position top
edit: I don't want to just take content from different pages and load it into the current page. What I really want to do is load different html files that will be interactive within the television. I have found that it is difficult to do this because you can't load html files into DIV's and you can't click on links through a transparent png file.
Hello,
I am building a website for a tv show that my friends and I make called Every Single Day.
here you can see the mock up of what I have so far:
http://www.uvm.edu/~areid/cs195/final/S/S.html
as of right now, the image I am using is just one big image that I sliced up with Photoshop.
What my goal is, is to use some sort of script to make it so the outside television will stay in place statically and the web-content within the television will transition without reloading the outer-most television.
I wanted to combine this technique with something similar to the fss slider script to allow each page on the site to slide, making it look like it is a continuation of the room. -Perhaps this isn't even the best way to achieve my desired result.
I have all of my images drawn and sliced, all I need now is some direction in what exactly to search for to find the pieces I am looking for.
Thank you very much, I am pleased to have joined this community,
cooper reid
Edit 5: http://jsfiddle.net/wdm954/pqAJK/10/ (Shows addition content.)
Edit 4: http://jsfiddle.net/wdm954/pqAJK/7/
This demo includes panning to specific frames.
var h = $('.clickable div').height(); //height of a single content DIV
var divCount = 0;
$('.clickable div').each(function() { divCount++; }); //count number of content DIVs
$('.pan').click(function(e) {
e.preventDefault(); //prevent default action (of <a>)
if ($('.content div').is(':animated')) return false; //disable click while animating
var x = $(this).attr('href'); x = $(x).index(); //get index of destination element
$('.content div').animate({top: -x*h +'px'}, 2000); //animate to destination
});
$('#tv-right').click(function() {
if ($('.content div').is(':animated')) return false; //disable click while animating
$('.content div').animate({top: '-='+h+'px'}, 2000); //animation
//if last div then go back to the start
if ($('.content div:last').css('top') == (-h * (divCount - 1)) +"px") {
$('.content div').stop().animate({ top: '0px' }, 1000);
}
});
Edit 3: http://jsfiddle.net/wdm954/pqAJK/5/
Ok, check this demo out. Clicking on the right side of the TV (where you may put some buttons) will scroll the content in the screen. When you reach the last content section, the next click will return to the first content section. I layered the content so the background divs scroll behind the TV image and the content scrolls above (so you can click on it. There are a few other tricks thrown in but look it over and you should get the idea.
Edit 2: http://jsfiddle.net/wdm954/pqAJK/3/ (Click the TV to see the transition. This has content divs instead of just a background image).
Edit: Check out this demo: http://jsfiddle.net/wdm954/pqAJK/
I would first cut out the screen part of the TV and save it has a .png with transparency so you can see what is behind the screen portion of the TV.
Then you can add a background image and animate that with jQuery to slide into view the portion you would like to display.
I *personally wouldn't use any slices, kind of an old school technique for when most people didn't have high speed connections.
Wrap everything inside the outer television in a <div>
Create seperate HTML pages that just has the HTML of the content that you want inside the television.
Use jQuery's AJAX get method to get the HTML for the page without refreshing it.
e.g. Your "single" image is in a <td> with ID "rightframe". So when rightframe is clicked, you might want to get the html of a page called single.html and put that inside the television (let's assume your <div> or <table> that has the code has ID content):
$('#rightframe').click(function() {
$.get('single.html', function(data) {
$('#content').html(data);
});
});
Edit: For the sliding part, you would have to create two separate tables/divs side by side, one for the current page, and one for the page that is being loaded. Then you could use a jQuery plugin like Slidy http://www.wbotelhos.com/slidy/ to transition between them.
Personally I think it would be much cooler if you could put an animated GIF of TV white noise on the television while the page is loading :)
Something along the following: http://jsfiddle.net/Vzdu7/