Posted in Random

Random Post #3

I have always wanted to do this…. *smirk

Ψ( ̄∀ ̄)Ψ

I have been playing around tweaking the blog to my liking and I stumbled across this site and I really liked the way the hand positioned itself to the center of the container (when scrolling down) giving an illusion that the container is being held by the naked man

┬┴┬┴┤((( ̄へ├┬┴┬┴

And I really wanted to replicate it … So I thought I’ll do that and wrap it up for today?

I know this is just a justification, but I don’t want to just rip off the idea. I want to put my flair into it also… and I am only going to do it for this page and if it really pleases my soul I’ll do it for every other page?So how did I manage to plagiarize the idea? … *sigh

Method 1:

In order that I have a better chance at figuring out what happened there… I opened different pages having the same layout (the home,about and the contact page) and opened the source code of the pages. From the source code opened I try to figure out the minimal similar CSS code that needs to be copied in order that I have the desired effect?

How to find the minimal code? Usually, people want the code to be user-friendly (So I am gonna exploit that). Since the hands are what that slides down the container(Container is the black page that contains the body text of the web page) find where all the id/class/image name has the word hand… I guess I hit the jackpot eh?

So from what I can see there are a few things that I need in order to have that effect:

  • scrollfollow.js – The JS file that helps animate when scrolling is done . Generic code. I’ll exploit this later.
  • HTML code -The div tag that places the left and the right hand right before the script files in the end body tag.
  • CSS code – And the class that has the hidden code for the image and position of the hand. This code will be present in one of the CSS in the head tag.
  • JS code -The actual script that calls and even manages to integrate the whole thing…

So that’s about it … that got over pretty soon? In order that I can integrate that with my blog … that too only in one page I inserted the code in the top portion of this post and cropped the image from the site? I’ll change that again maybe and update this place also accordingly maybe?

Well, the other methods kinda include asking people (Quora, Stack Overflow) for help and referring to books and since my 30 mins time is about to be over I am moving on…

.
.
.
*after like 15 mins…

I am not satisfied … So it is gonna be only on this page… Somehow his hand looks so beautiful upon comparison … I gave up anyway… I’ll search for something else maybe …mostly cause this thing was taking some time to load…since I linked it to my copy of the js file in the drive… since it took too long to load I minified it and put it in this post… man the things I do under an hour.. *tsk *tsk

Well. anyhow I have now realized that those hands are creepy and have limited their grip to only this post … *phew

¯\_(⌣̯̀⌣́)_/¯

!function(t){t.scrollFollow=function(e,o){function i(){e.queue([]);var i,l=parseInt(t(window).height()),s=parseInt(t(document).scrollTop()),a=parseInt(e.cont.offset().top),r=parseInt(e.cont.attr(“offsetHeight”)),c=parseInt(e.attr(“offsetHeight”)+(parseInt(e.css(“marginTop”))||0)+(parseInt(e.css(“marginBottom”))||0));n&&(“top”==o.relativeTo?i=e.initialOffsetTop>=s+o.offset?e.initialTop:Math.min(Math.max(-a,s-e.initialOffsetTop+e.initialTop)+o.offset,r-c-e.paddingAdjustment):”bottom”==o.relativeTo&&(i=e.initialOffsetTop+c>=s+o.offset+l?e.initialTop:Math.min(s+l-c-o.offset,r-c)),(new Date).getTime()-e.lastScroll>=o.delay-20&&e.animate({top:i},o.speed,o.easing))}e=t(e);var n=(e.css(“position”),!0);if(void 0!=t.cookie)if(“false”==t.cookie(“scrollFollowSetting”+e.attr(“id”))){var n=!1;t(“#”+o.killSwitch).text(o.offText).toggle(function(){n=!0,t(this).text(o.onText),t.cookie(“scrollFollowSetting”+e.attr(“id”),!0,{expires:365,path:”/”}),i()},function(){n=!1,t(this).text(o.offText),e.animate({top:e.initialTop},o.speed,o.easing),t.cookie(“scrollFollowSetting”+e.attr(“id”),!1,{expires:365,path:”/”})})}else t(“#”+o.killSwitch).text(o.onText).toggle(function(){n=!1,t(this).text(o.offText),e.animate({top:e.initialTop},0),t.cookie(“scrollFollowSetting”+e.attr(“id”),!1,{expires:365,path:”/”})},function(){n=!0,t(this).text(o.onText),t.cookie(“scrollFollowSetting”+e.attr(“id”),!0,{expires:365,path:”/”}),i()});””==o.container?e.cont=e.parent():e.cont=t(“#”+o.container),e.initialOffsetTop=parseInt(e.offset().top),e.initialTop=parseInt(e.css(“top”))||0,”relative”==e.css(“position”)?e.paddingAdjustment=parseInt(e.cont.css(“paddingTop”))+parseInt(e.cont.css(“paddingBottom”)):e.paddingAdjustment=0,t(window).scroll(function(){t.fn.scrollFollow.interval=setTimeout(function(){i()},o.delay),e.lastScroll=(new Date).getTime()}),t(window).resize(function(){t.fn.scrollFollow.interval=setTimeout(function(){i()},o.delay),e.lastScroll=(new Date).getTime()}),e.lastScroll=0,i()},t.fn.scrollFollow=function(e){return e=e||{},e.relativeTo=e.relativeTo||”top”,e.speed=e.speed||500,e.offset=e.offset||0,e.easing=e.easing||”swing”,e.container=e.container||this.parent().attr(“id”),e.killSwitch=e.killSwitch||”killSwitch”,e.onText=e.onText||”Turn Slide Off”,e.offText=e.offText||”Turn Slide On”,e.delay=e.delay||0,this.each(function(){new t.scrollFollow(this,e)}),this}}(jQuery); #rc{ float:right; width:171px; margin-right:-160px; position:relative; } #lc{ float:left; width:171px; margin-left:-165px; position:relative; } #lh{ width:171px; height:367px; background-image:url(https://lh3.googleusercontent.com/-gsfQUiflfvw/V14z6On3tXI/AAAAAAAABTo/T0ShU-LVSZkekKG-IL5e5Xx9Ng2Q4qNigCLcB/s1600/l_hand.png); background-repeat:no-repeat; position:absolute; } #rh{ width:175px; height:367px; background-image:url(https://lh3.googleusercontent.com/-CbWcT3NXSRE/V14z4j4r6vI/AAAAAAAABTg/1wYpPTpP7rQ1hB6l9tXY8rQp5OOgLyoIACLcB/s1600/r_hand.png); background-repeat:no-repeat; position:absolute; }

$(document).ready(function(){ // scrolling hands $(‘.h’).scrollFollow( {main-outer, speed:500, offset:200} ); });

Advertisements

2 thoughts on “Random Post #3

  1. Oh! Kudos to you for noticing that. I tried to rectify that and I ended up failing miserably at it(Sorry about that). I was working on inserting a new set of jQuery headers (they kinda update the library occasionally) onto the blogs basic template and that tampered with the movement of the creepy hands (It was actually at the time of this post that my floating widget also stopped floating…) I guess this is what I get tampering around with too much code…*sigh I am sorry but I will get back to this as soon as my exams are done and when I have more time to look through these things of the past *awkward chuckle*

    Honestly, I am little stumped cause I don't remember witting any of this ??? And thank you for dropping by … It means a lot to me 😉

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s