Slide away landing page of website - javascript

I have a landing page on my website.
I want to be able to click or slide it away to view the actual website (sort of like the Windows 8 lock screen)
I have tried to use an onclick event on the landing page to open the website but it does not give the desired effect. I need it to be seamless and fast.
How could I go about doing this?
Thanks,

Use Position: fixed; for the landing page content and listen for click in JavaScript
as shown in http://jsfiddle.net/5HXaQ/5/
You can use different CSS transition functions to achieve the kind of slide effect you need
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

Related

Prevent page from flickering when using javascript and anchor links

I'm using scrollreveal on my website, and it mostly works well, but
sometimes the page is flickering just before the divs reveals and
make it looks like the page is loading, before the code is executed
after loaded http://regen.no/samarbeidspartnere when reloading
the page, you clearly see the problem.
Sometimes when using the #anchor link to a div with the id, the page is also flickering.http://regen.no/start changing between
"forsiden" and "påmelding" the page are flickering before it
jumps to the target div.
Is there any way to solve this issue?
Thanks.
By using the performance tab in Chrome developer tools, I did a recording (changing between two anchor points) and I notice that when a link is hit, the page goes directly there and then the smooth scrolling effect takes place. To describe this with a small example let's say that the user is at #bottom and clicks to go to #top:
The page goes directly to #top
The smooth scrolling effect takes place, so the page goes back to #bottom
Smooth scrolling back to #top
This is why you get this flickering and flashing result.
Maybe you should use a event.preventDefault(); somewhere in your js code.

JavaScript Image Slider in Oracle_ADF 12.2.1

I am trying to implement an animated Image Slider(using HTML) on my website homepage using Oracle-ADF 12.2.1 . The javascript I am using renders the properties in the initial page load but when I navigate back to the page the animation disappears. Could anyone please help me with this?
"when I navigate back to the page the animation disappears”
Presumly you are using an “af:button” to navigate back to your page.
Try adding partialSubmit=“false” to that button. It will reload the entire page, therfore it will act as if you open the page for the first time.

Jquery/CSS3 slide up/down page transition

so i have a website with multiple pages and a navigation menu with links to the other pages.
i need a Jquery and/or CSS page transition that'll slide the page down, load new page and then slide that page back up.
This would be easy to do if the content of all the pages was in one single page, in different divs, and then i could just make a sort of carousel to show the div corresponding to the link that was clicked. Most of the answers i found applied to that situation. this is not the case though so that wouldn't work and i can't touch the html of the site!
css3 transitions work great when the page loads, but they also need to happen onbeforeunload, which is where the problem lies. i can use jquery to give the divs a class onbeforeunload, which works, but it unloads before the animations even start happening.
I've tried this plugin:
https://rawgit.com/votum/page-transitions/master/demo/index.html
but it looks very glitchy and doesn't work properly.
any ideas?
You can check out accordion to show content of selected menu item.
https://jqueryui.com/accordion/

Make a seamless transition between different urls

Say I have two pages located on different urls: Home and, for example, Contact. I have some fancy CSS3 effects on Home page and a link to Contact page.
When I click on Contact page link, I want to slide some Home page elements off the page, or make them transparent or something else, then I just let the browser load Contact page, but I want to make this transition as seamless as possible. Ideally, to achieve the effect of a one-page site, where I can easily show and hide page elements.
How to do it the best way?
Load the content with XMLHttpRequest
Use the history API to change the URL to one which will load the contact page by default
Use CSS Transitions / Animation to move the content about

javascript entire page fly in and out effect?

Recently I came across a site that had an interesting effect, I can't remember which site it was. The effect is that on navigation click, the entire current page fly away to the top-right corner and disappear, and the new page flys in from the bottom-left and occupy the browser window.
Does anyone know where I can obtain a example code of this effect? Thanks.
Try this
effects
Instead of divs you can do this for your whole page (body element).
First you have to define a class for all links () tags. When the user clicks any link you can call the effect for the whole page.(i.e first on the current page and then when the new page loads you again call the effect)
that's called single/one page theme. see this demo:
http://themeforest.net/item/stratum-html-single-page-template/full_screen_preview/1668778
http://themeforest.net/item/volemo-html-one-page-template/full_screen_preview/1359429
try jquery .scroll()
the key concept is you create a single large page (eg. height: 2500px) then assign anchor-link scroll to fix position.
You can acheive Similar effect on normal site by doing the following to the main body tag
add a click event on the navigation links which uses jQuery effects to slide your page out fast
add an onload($(document).ready();) event to all the pages which slides in the body as you want

Categories