jquery - Background center parallax effect jumps to top -

-

i using below code provide simple parallax effect background image. ideally in css want image centered (not top). however, start scrolling script jumps top , begins effect. cant work out if it's possible alter jquery begins centred image? can help?

<div id="para" style="background-image: url('blah')" data-speed="8" data-type="background"> </div>  #para {     height:500px;     float:left;     width:100%;     background-size:100%;     background-position: center center;     background-repeat: no-repeat;     background-attachemnt: fixed;  }  //parallax $(document).ready(function() {     if ($(window).width() > 1025) {         // cache window object         $window = $(window);         $('div[data-type="background"]').each(function() {             var $bgobj = $(this);             $(window).scroll(function() {                 var ypos = -($window.scrolltop() / $bgobj.data('speed'));                 var coords = '50% ' + ypos + 'px';                 $bgobj.css({                     backgroundposition: coords                 });             });         });     } });

you can't give background-position percentage , pixels. should 1 or other. use percent units , turn $window.scrolltop() percentage well. multiply 100 , divide $window.height().

//parallax $(document).ready(function() {      if ($(window).width() > 1025) {         // cache window object         $window = $(window);         $('div[data-type="background"]').each(function() {             var $bgobj = $(this);             $(window).scroll(function() {                 var ypos = 50 - ($window.scrolltop() * 100 / $window.height() / $bgobj.data('speed'));                 var coords = '50% ' + ypos + "%";                 $bgobj.css({                     backgroundposition: coords                 });             });         });     } });

your data-speed attribute needs lower too. found 0.5 worked well.

<div id="para" style="background-image: url('blah')" data-speed="0.5" data-type="background">


Comments

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5); ...
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:...
Read more