jquery - Load CSS properties of another page on click -
when clicks link, i'd 3 things happen:
1) content fade out, leaving background image
2) background image fade background image of page behind hyperlink
3) 1 time new background image loaded, proceed hyperlink event, , bring user new page (where new content fade in).
i think give nice continuity effect, i'm having problem fetching url of background image of link. utilize .load alter contents of , haven't been able find way css property.
ps: ignore {% tags %}: i'm using django template tags referencing urls, , these working fine (...for :) )
{% load staticfiles %} <html> <head> {% block title %}<title>title goes here</title>{% endblock %} <link rel='stylesheet' type='text/css' href='{% static 'css/style.css' %}'> <style> body{ background: url("{% block bgimage %} {% static 'images/backgroundimages/cactus.jpg' %} {% endblock %}"); background-size: cover; background-repeat: no-repeat; } </style> <script src='{% static 'js/jquery.js' %}'></script> <script> $(document).ready(function(){ $('body').css('display', 'none'); $('body').fadein(1000); $(".navlink").click(function(event){ event.preventdefault(); var targetlink = $(this).attr('href'); ***do url of background image of page pointed @ targetlink*** }); }); </script> </head> <body> {% block nav %} <nav> <a href='{% url 'home' %}' class='navlink'>home</a> <a href='{% url 'about' %}' class='navlink'>about</a> <a href='{% url 'services:services' %}' class='navlink'>services</a> <a href='{% url 'portfolio:portfolio' %}'class='navlink'>portfolio</a> <a href='{% url 'projects:projects' %}' class='navlink'>projects</a> <a href='{% url 'contact' %}' class='navlink'>contact</a> </nav> {% endblock %} <div id='wrapper'> {% block content %} content goes here {% endblock %} </div> </body> thanks in advance guidance!
i don't think consistently transition smoothly without using ajax , history.pushstate. heck of it...
first should set background-images in global style.css classes associated pages. , add together transitions in css instead of jquery.
css class="lang-css prettyprint-override">body { -webkit-transition: background-image 1s ease-in-out; -moz-transition: background-image 1s ease-in-out; transition: background-image 1s ease-in-out; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; transition-delay: 1s; } .home-page { background-image: url(bg-home.jpg); } .about-page { background-image: url(bg-about.jpg); } .content { opacity: 0; -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; transition: opacity 1s linear; } .fade-in { opacity: 1; } then utilize jquery add together , remove classes start transitions , and handle navigating pages.
jquery class="lang-js prettyprint-override">$(function () { $body = $("body"); $content = $(".content"); settimeout(function () { $content.addclass("fade-in"); }, 200); function ontransitionend(href) { $content.on('webkittransitionend otransitionend otransitionend transitionend', function (event) { event.stoppropagation(); }); $body.on('webkittransitionend otransitionend otransitionend transitionend', function () { window.location = href; }); }; function pagetransition(topagelink, topageclass) { event.preventdefault(); $body.removeclass().addclass(topageclass); $content.removeclass("fade-in"); ontransitionend(topagelink); }; $(".home-link").on("click", function (event) { pagetransition($(this).attr('href'), 'home-page') }); $(".about-link").on("click", function (event) { pagetransition($(this).attr('href'), 'about-page') }) }); then markup pages have classes on body , links.
htmlhome page illustration
<body class="home-page"> <nav> <a href="home.html" class="home-link">home</a> <a href="about.html" class="about-link">about</a></nav> <div class="content"> content goes here </div> </body> about page illustration
<body class="about-page"> <nav> <a href="home.html" class="home-link">home</a> <a href="about.html" class="about-link">about</a></nav> <div class="content"> content goes here </div> </body> otherwise, can seek plugin fetches content using ajax, transitions, , updates url: http://weblinc.github.io/jquery.smoothstate.js/
jquery
No comments:
Post a Comment