javascript - jQuery Finding Position Of Element Relative to Container -
so have little bit of block in making website, need spice bit adding animations can't seem effect working: https://youtu.be/btobgjyi8pc. using tutorial (https://css-tricks.com/slide-in-as-you-scroll-down-boxes/) because don;t know jquery did not think need it. problem seems jquery not find correct position of elements want animate (they repositioned position: relative;)
example 1. it's jquery running before css , not taking styles account.
example 2. it's anchors elements 4th of page below supposed (i don't know if anchors exist in css/html/jquery)
example 3. here gif show mean. http://gyazo.com/fe72b683031e88d4247e62ae9e9fe5e8 @ text bodies under 'screamer' 'swezii' , 'kinzu'
keep in mind i'm new jquery going need explain in great detail me talking if has jquery.
here code
$(document).ready(function() { (function($) { /** * copyright 2012, digital fusion * licensed under mit license. * http://teamdf.com/jquery-plugins/license/ * * @author sam sehnert * @desc small plugin checks whether elements within * user visible viewport of web browser. * accounts vertical position, not horizontal. */ $.fn.visible = function(partial) { var $t = $(this), $w = $(window), viewtop = $w.scrolltop(), viewbottom = viewtop + $w.height(), _top = $t.offset().top, _bottom = _top + $t.height(), comparetop = partial === true ? _bottom : _top, comparebottom = partial === true ? _top : _bottom; return ((comparebottom <= viewbottom) && (comparetop >= viewtop)); }; })(jquery); var win = $(window); var allmods = $(".animated"); allmods.each(function(i, el) { var el = $(el); if (el.visible(true)) { el.addclass("already-visible"); } }); win.scroll(function(event) { allmods.each(function(i, el) { var el = $(el); if (el.visible(true)) { el.addclass("come-in"); } }); }); });/* managers */ /* 278 px */ #managersbg { background-color: rgba(255, 153, 0, 0.79); position: absolute; left: 0px; top: 495px; width: 100%; } @media (min-width: 288px) { #managersbg { top: 495px; } } @media (min-width: 295px) { #managersbg { top: 470px; } } @media (min-width: 350px) { #managersbg { top: 455px; } } @media (min-width: 358px) { #managersbg { top: 460px; } } @media (min-width: 364px) { #managersbg { top: 435px; } } @media (min-width: 416px) { #managersbg { top: 410px; } } @media (min-width: 450px) { #managersbg { top: 420px; } } @media (min-width: 485px) { #managersbg { top: 400px; } } @media (min-width: 510px) { #managersbg { top: 410px; } } @media (min-width: 540px) { #managersbg { top: 420px; } } @media (min-width: 550px) { #managersbg { top: 470px; } } @media (min-width: 624px) { #managersbg { top: 450px; } } @media (min-width: 650px) { #managersbg { top: 460px; } } @media (min-width: 671px) { #managersbg { top: 435px; } } @media (min-width: 775px) { #managersbg { top: 410px; } } @media (min-width: 850px) { #managersbg { top: 420px; } } @media (min-width: 914px) { #managersbg { top: 400px; } } h4 { text-align: center; font-weight: 500 } #managers { position: relative; top: 15px; } #screamer, #swezii, #kinzu { background-image: url(../images/screamer.png); background-size: 100%; width: 60px; height: 60px; border-radius: 50%; border-color: rgba(255, 153, 0, 0); margin: 0 auto; } #screamer { margin-top: 20px; } #swezii { position: relative; top: 125px; } #kinzu { position: relative; top: 275px; } #manager1, #manager2, #manager3 { position: relative; } #manager1 { top: -115px; } #manager1, #manager2, #manager3 { font-weight: 600 } #manager2 { top: 45px; } #manager3 { top: 195px; } #text1 { position: relative; top: -165px; } #text2 { position: relative; top: -50px; } @media (min-width: 550px) { #text1, #text2, #text3 { position: relative; left: 50%; transform: translatex(-25%); text-align: center; } } p { margin: 0 auto; text-align: center; }<!doctype html> <html lang="en"> <head> <!-- basic page needs –––––––––––––––––––––––––––––––––––––––––––––––––– --> <meta charset="utf-8"> <title>theversionarts studio</title> <meta name="description" content="theversionarts private design studio. provide clients quality design @ small cost."> <meta name="author" content="theversionarts"> <!-- mobile specific metas –––––––––––––––––––––––––––––––––––––––––––––––––– --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- font –––––––––––––––––––––––––––––––––––––––––––––––––– --> <link href='http://fonts.googleapis.com/css?family=raleway:400,500,600,700' rel='stylesheet' type='text/css'> <!-- css –––––––––––––––––––––––––––––––––––––––––––––––––– --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/skeleton.css"> <link rel="stylesheet" href="css/base.css"> <!-- favicon –––––––––––––––––––––––––––––––––––––––––––––––––– --> <link rel="icon" type="image/png" href="images/favicon.png"> <!-- scripts -------------------------------------------------- --> <script src="jquery-1.11.3.min.js"></script> <script type="text/javascript" src="javascript/animated.js"></script> </head> <body> <!-- primary page layout –––––––––––––––––––––––––––––––––––––––––––––––––– --> <img src="images/bg.png" id="background"> <div id="headerbg"> <div class="container"> <div class="row"> <div class="five columns"> <img src="images/thv-header.png" id="header"> </div> <div class="seven columns"> <nav> <ul> <li><a href="#about">about</a> </li> <li><a href="#contact">contact</a> </li> <li><a href="#designers">designers</a> </li> </ul> </nav> </div> </div> </div> </div> <div id="aboutbg"> <div class="container2"> <div class="row"> <div class="twelve columns"> <h4 id="about">about us</h4> </div> <div class="animated"> <div class="twelve columns"> <p>theversionarts private design studio. founded in winter of 2014. connect clients designers need. our goal serve high quality design @ affordable price through internet. strive impress our clients. don't sell graphics, or designs. sell art , colours.</p> </div> </div> <div class="animated"> <div class="seven columns" id="aboutbar"></div> </div> </div> </div> </div> <div id="managersbg"> <div class="container3"> <div class="row"> <div class="animated"> <h4 id="managers">our managers</h4> </div> </div> <div class="row"> <div class="animated"> <div class="one-third-column" id="screamer"> </div> </div> <div class="animated"> <div class="one-third-column" id="swezii"> </div> </div> <div class="animated"> <div class="one-third-column" id="kinzu"> </div> </div> </div> <div class="row"> <div class="animated"> <div class="one-third-column"> <p id="manager1">screamer</p> </div> </div> <div class="animated"> <div class="one-third-column"> <p id="manager2">swezii</p> </div> </div> <div class="animated"> <div class="one-third-column"> <p id="manager3">kinzu</p> </div> </div> </div> <div class="row"> <div class="animated"> <div class="seven columns"> <p id="text1">i guy loves things in head onto paper. have great ideas blow minds! ready!</p> </div> </div> <div class="animated"> <div class="seven columns"> <p id="text2">i love fliudity of art, of kind!. goal become bettter designer myself can share knowldge others. 1 of best designers price.</p> </div> </div> <div class="animated"> <div class="seven columns"> <p id="text3">i'm guy chilling on computer, creating fantastic art you. can bet you'll ask for!</p> </div> </div> </div> </div> </div> <!-- end document –––––––––––––––––––––––––––––––––––––––––––––––––– --> </body> </html>
i commented out positioning code, seems main problem. here css (i added come-in class working in jsfiddle:http://jsfiddle.net/kaemgm6y/
i din't alter javascript @ all. here css file used.
also added borders visual/debugging effect - can remove later.
/* managers */ /* 278 px */ #managersbg { background-color: rgba(255, 153, 0, 0.79); position: absolute; left: 0px; top: 495px; width: 100%; } @media (min-width: 288px) { #managersbg { top: 495px; } } @media (min-width: 295px) { #managersbg { top: 470px; } } @media (min-width: 350px) { #managersbg { top: 455px; } } @media (min-width: 358px) { #managersbg { top: 460px; } } @media (min-width: 364px) { #managersbg { top: 435px; } } @media (min-width: 416px) { #managersbg { top: 410px; } } @media (min-width: 450px) { #managersbg { top: 420px; } } @media (min-width: 485px) { #managersbg { top: 400px; } } @media (min-width: 510px) { #managersbg { top: 410px; } } @media (min-width: 540px) { #managersbg { top: 420px; } } @media (min-width: 550px) { #managersbg { top: 470px; } } @media (min-width: 624px) { #managersbg { top: 450px; } } @media (min-width: 650px) { #managersbg { top: 460px; } } @media (min-width: 671px) { #managersbg { top: 435px; } } @media (min-width: 775px) { #managersbg { top: 410px; } } @media (min-width: 850px) { #managersbg { top: 420px; } } @media (min-width: 914px) { #managersbg { top: 400px; } } h4 { text-align: center; font-weight: 500 } h2{ text-align:center; } div.animated{ border-width:1px; border-style:solid; } #managers { position: relative; top: 15px; } #screamer, #swezii, #kinzu { background-image: url(../images/screamer.png); background-size: 100%; width: 60px; height: 60px; border-radius: 50%; border-color: rgba(255, 153, 0, 0); margin: 0 auto; } /*#screamer { margin-top: 20px; } #swezii { position: relative; top: 125px; } #kinzu { position: relative; top: 275px; } #manager1, #manager2, #manager3 { position: relative; }*/ /*#manager1 { top: -115px; } #manager1, #manager2, #manager3 { font-weight: 600 } #manager2 { top: 45px; } #manager3 { top: 195px; }*/ /*#text1 { position: relative; top: -165px; } #text2 { position: relative; top: -50px; }*/ @media (min-width: 550px) { #text1, #text2, #text3 { position: relative; left: 50%; /*transform: translatex(-25%);*/ text-align: center; } } p { margin: 0 auto; text-align: center; } .come-in { transform: translatey(150px); animation: come-in 0.8s ease forwards; } .come-in:nth-child(odd) { animation-duration: 0.6s; } .already-visible { transform: translatey(0); animation: none; } @keyframes come-in { { transform: translatey(0); } } also changed html. combined of divs. can have multiple classes in same div so:
<div class="animated one-third-column" id="kinzu"> </div> the other thing helped putting headers (manager names , paragraph in same div - makes impossible them wrongly positioned on top of each other.
here altered html (needs more cleanup, idea):
<body> <!-- primary page layout –––––––––––––––––––––––––––––––––––––––––––––––––– --> <img src="images/bg.png" id="background"> <div id="headerbg"> <div class="container"> <div class="row"> <div class="five columns"> <img src="images/thv-header.png" id="header"> </div> <div class="seven columns"> <nav> <ul> <li><a href="#about">about</a> </li> <li><a href="#contact">contact</a> </li> <li><a href="#designers">designers</a> </li> </ul> </nav> </div> </div> </div> </div> <div id="aboutbg"> <div class="container2"> <div class="row"> <div class="twelve columns"> <h4 id="about">about us</h4> </div> <div class="animated"> <div class="twelve columns"> <p>theversionarts private design studio. founded in winter of 2014. connect clients designers need. our goal serve high quality design @ affordable price through internet. strive impress our clients. don't sell graphics, or designs. sell art , colours.</p> </div> </div> <div class="animated"> <div class="seven columns" id="aboutbar"></div> </div> </div> </div> </div> <div id="managersbg"> <div class="container3"> <div class="row"> <div class="animated"> <h4 id="managers">our managers</h4> </div> </div> <div class="row"> <div class="animated one-third-column" id="screamer"> </div> <div class="animated one-third-column" id="swezii"> </div> <div class="animated one-third-column" id="kinzu"> </div> </div> <div class="row"> <div class="animated"> <div class="one-third-column"> <h2 id="manager1">screamer</h2> <p id="text1">i guy loves things in head onto paper. have great ideas blow minds! ready!</p> </div> </div> <div class="animated"> <div class="one-third-column"> <h2 id="manager2">swezii</h2> <p id="text2">i love fliudity of art, of kind!. goal become bettter designer myself can share knowldge others. 1 of best designers price.</p> </div> </div> <div class="animated"> <div class="one-third-column"> <h2 id="manager3">kinzu</h2> <p id="text3">i'm guy chilling on computer, creating fantastic art you. can bet you'll ask for!</p> </div> </div> </div> <div class="row"> <div class="animated"> <div class="seven columns"> </div> </div> <div class="animated"> <div class="seven columns"> </div> </div> <div class="animated"> <div class="seven columns"> </div> </div> </div> </div> </div> <!-- end document –––––––––––––––––––––––––––––––––––––––––––––––––– --> </body>
Comments
Post a Comment