javascript - CSS Animated type blocked/blocking Hero Image with JS effect attached -
hey ux designer learning code here, please forgive ignorance , crappy code.
i have css animated type overlayed hero image has js effect applied it.
originally couldn't both images render. type render couldn't see hero image behind it, or hero image appear couldn't see type.
at first thought class applied type creating opaque background on hero image eliminated possibility selectively commenting out stuff.
then realized needed put type div inside hero image div. had done before tried again , worked! reason worked because had selectively commented out javascript effect being applied hero image.
so problem must tilt-effect (the javascript effect) class. have little knowledge of javascript unsure of causing problem.
i'm guessing has way javascript manipulating stuff on page? i've had similar problem before when had page footer , responsive image gallery driven js. html footer render , js gallery re-position objects on page. i'm thinking similar happening here, maybe?
here's jsfiddle code: http://jsfiddle.net/thedonquixotic/8vv7t1as/2/
the tilt fx stuff second section of code in js part, i've labeled ease of finding.
relevant part of html follows:
<!--hero image tilt effect--> <div class="hero"> <div class="hero__imgwrap"> <!--<div class="grid__item"> <a class="link link--kumya" href="about.html"><span data-letters="david french">david french</span></a> </div>--> <img class="hero__img tilt-effect" data-tilt-options='{ "opacity" : 0.3, "extraimgs" : 3, "movement": { "perspective" : 1700, "translatex" : -7, "translatey" : -7, "rotatex" : -7, "rotatey" : -7 } }' src="https://cdn.tutsplus.com/craft/uploads/2013/11/14-snowflakes-lay-paper-copy.jpg" alt="welcome!" /> </div> </div> <!--hero image tilt effect--> also here javascript:
/** * tiltfx.js * http://www.codrops.com * * licensed under mit license. * http://www.opensource.org/licenses/mit-license.php * * copyright 2015, codrops * http://www.codrops.com */ ;(function(window) { 'use strict'; /** * ************************************************************************** * utils * ************************************************************************** */ // https://gist.github.com/desandro/1866474 var lasttime = 0; var prefixes = 'webkit moz ms o'.split(' '); // unprefixed raf , caf, if present var requestanimationframe = window.requestanimationframe; var cancelanimationframe = window.cancelanimationframe; // loop through vendor prefixes , prefixed raf , caf var prefix; for( var = 0; < prefixes.length; i++ ) { if ( requestanimationframe && cancelanimationframe ) { break; } prefix = prefixes[i]; requestanimationframe = requestanimationframe || window[ prefix + 'requestanimationframe' ]; cancelanimationframe = cancelanimationframe || window[ prefix + 'cancelanimationframe' ] || window[ prefix + 'cancelrequestanimationframe' ]; } // fallback settimeout , cleartimeout if either request/cancel not supported if ( !requestanimationframe || !cancelanimationframe ) { requestanimationframe = function( callback, element ) { var currtime = new date().gettime(); var timetocall = math.max( 0, 16 - ( currtime - lasttime ) ); var id = window.settimeout( function() { callback( currtime + timetocall ); }, timetocall ); lasttime = currtime + timetocall; return id; }; cancelanimationframe = function( id ) { window.cleartimeout( id ); }; } function extend( a, b ) { for( var key in b ) { if( b.hasownproperty( key ) ) { a[key] = b[key]; } } return a; } // http://www.quirksmode.org/js/events_properties.html#position function getmousepos(e) { var posx = 0; var posy = 0; if (!e) var e = window.event; if (e.pagex || e.pagey) { posx = e.pagex; posy = e.pagey; } else if (e.clientx || e.clienty) { posx = e.clientx + document.body.scrollleft + document.documentelement.scrollleft; posy = e.clienty + document.body.scrolltop + document.documentelement.scrolltop; } return { x : posx, y : posy } } // http://www.sberry.me/articles/javascript-event-throttling-debouncing function throttle(fn, delay) { var allowsample = true; return function(e) { if (allowsample) { allowsample = false; settimeout(function() { allowsample = true; }, delay); fn(e); } }; } /***************************************************************************/ /** * tiltfx fn */ function tiltfx(el, options) { this.el = el; this.options = extend( {}, this.options ); extend( this.options, options ); this._init(); this._initevents(); } /** * tiltfx options. */ tiltfx.prototype.options = { // number of image elements (div background-image) add dom - min:1, max:5 (for higher number, it's recommended remove transitions of .tilt__front in stylesheet. extraimgs : 2, // opacity value image elements. opacity : 0.7, // default first layer not move. bgfixed : true, // image element's movement configuration movement : { perspective : 1000, // perspective value translatex : -10, // relative movement of -10px 10px on x-axis (setting negative value reverses direction) translatey : -10, // relative movement of -10px 10px on y-axis translatez : 20, // relative movement of -20px 20px on z-axis (perspective value must set). also, specific translation done when mouse moves vertically. rotatex : 2, // relative rotation of -2deg 2deg on x-axis (perspective value must set) rotatey : 2, // relative rotation of -2deg 2deg on y-axis (perspective value must set) rotatez : 0 // z-axis rotation; default there's no rotation on z-axis (perspective value must set) } } /** * initialize: build necessary structure image elements , replace html img element. */ tiltfx.prototype._init = function() { this.tiltwrapper = document.createelement('div'); this.tiltwrapper.classname = 'tilt'; // main image element. this.tiltimgback = document.createelement('div'); this.tiltimgback.classname = 'tilt__back'; this.tiltimgback.style.backgroundimage = 'url(' + this.el.src + ')'; this.tiltwrapper.appendchild(this.tiltimgback); // image elements limit. if( this.options.extraimgs < 1 ) { this.options.extraimgs = 1; } else if( this.options.extraimgs > 5 ) { this.options.extraimgs = 5; } if( !this.options.movement.perspective ) { this.options.movement.perspective = 0; } // add image elements. this.imgelems = []; for(var = 0; < this.options.extraimgs; ++i) { var el = document.createelement('div'); el.classname = 'tilt__front'; el.style.backgroundimage = 'url(' + this.el.src + ')'; el.style.opacity = this.options.opacity; this.tiltwrapper.appendchild(el); this.imgelems.push(el); } if( !this.options.bgfixed ) { this.imgelems.push(this.tiltimgback); ++this.options.extraimgs; } // add dom , remove original img element. this.el.parentnode.insertbefore(this.tiltwrapper, this.el); this.el.parentnode.removechild(this.el); // tiltwrapper properties: width/height/left/top this.view = { width : this.tiltwrapper.offsetwidth, height : this.tiltwrapper.offsetheight }; }; /** * initialize events on main wrapper. */ tiltfx.prototype._initevents = function() { var self = this, moveopts = self.options.movement; // mousemove event.. this.tiltwrapper.addeventlistener('mousemove', function(ev) { requestanimationframe(function() { // mouse position relative document. var mousepos = getmousepos(ev), // document scrolls. docscrolls = {left : document.body.scrollleft + document.documentelement.scrollleft, top : document.body.scrolltop + document.documentelement.scrolltop}, bounds = self.tiltwrapper.getboundingclientrect(), // mouse position relative main element (tiltwrapper). relmousepos = { x : mousepos.x - bounds.left - docscrolls.left, y : mousepos.y - bounds.top - docscrolls.top }; // configure movement each image element. for(var = 0, len = self.imgelems.length; < len; ++i) { var el = self.imgelems[i], rotx = moveopts.rotatex ? 2 * ((i+1)*moveopts.rotatex/self.options.extraimgs) / self.view.height * relmousepos.y - ((i+1)*moveopts.rotatex/self.options.extraimgs) : 0, roty = moveopts.rotatey ? 2 * ((i+1)*moveopts.rotatey/self.options.extraimgs) / self.view.width * relmousepos.x - ((i+1)*moveopts.rotatey/self.options.extraimgs) : 0, rotz = moveopts.rotatez ? 2 * ((i+1)*moveopts.rotatez/self.options.extraimgs) / self.view.width * relmousepos.x - ((i+1)*moveopts.rotatez/self.options.extraimgs) : 0, transx = moveopts.translatex ? 2 * ((i+1)*moveopts.translatex/self.options.extraimgs) / self.view.width * relmousepos.x - ((i+1)*moveopts.translatex/self.options.extraimgs) : 0, transy = moveopts.translatey ? 2 * ((i+1)*moveopts.translatey/self.options.extraimgs) / self.view.height * relmousepos.y - ((i+1)*moveopts.translatey/self.options.extraimgs) : 0, transz = moveopts.translatez ? 2 * ((i+1)*moveopts.translatez/self.options.extraimgs) / self.view.height * relmousepos.y - ((i+1)*moveopts.translatez/self.options.extraimgs) : 0; el.style.webkittransform = 'perspective(' + moveopts.perspective + 'px) translate3d(' + transx + 'px,' + transy + 'px,' + transz + 'px) rotate3d(1,0,0,' + rotx + 'deg) rotate3d(0,1,0,' + roty + 'deg) rotate3d(0,0,1,' + rotz + 'deg)'; el.style.transform = 'perspective(' + moveopts.perspective + 'px) translate3d(' + transx + 'px,' + transy + 'px,' + transz + 'px) rotate3d(1,0,0,' + rotx + 'deg) rotate3d(0,1,0,' + roty + 'deg) rotate3d(0,0,1,' + rotz + 'deg)'; } }); }); // reset when mouse leaves main wrapper. /*this.tiltwrapper.addeventlistener('mouseleave', function(ev) { settimeout(function() { for(var = 0, len = self.imgelems.length; < len; ++i) { var el = self.imgelems[i]; el.style.webkittransform = 'perspective(' + moveopts.perspective + 'px) translate3d(0,0,0) rotate3d(1,1,1,0deg)'; el.style.transform = 'perspective(' + moveopts.perspective + 'px) translate3d(0,0,0) rotate3d(1,1,1,0deg)'; } }, 60); });*/ // window resize window.addeventlistener('resize', throttle(function(ev) { // recalculate tiltwrapper properties: width/height/left/top self.view = { width : self.tiltwrapper.offsetwidth, height : self.tiltwrapper.offsetheight }; }, 50)); }; function init() { // search imgs class "tilt-effect" [].slice.call(document.queryselectorall('img.tilt-effect')).foreach(function(img) { new tiltfx(img, json.parse(img.getattribute('data-tilt-options'))); }); } init(); window.tiltfx = tiltfx; })(window);
i hope understand created modify css:
.grid__item { position: absolute; left: 50%; z-index: 1; display: flex; justify-content: center; top: 50%; } .link--kumya { font-family: "syncopate",sans-serif; font-size: 6.5em; overflow: hidden; color: #242424; position: relative; left: -50%; top: -70px; text-align: center; } after change part type , animated background appear
Comments
Post a Comment