QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Home Apple interactive sticker effect

Apple interactive sticker effect

In this tutorial I will show you how to create Apple style interactive sticker effect.


View Demo

<!doctype html>
<html>
    <head>
        <title>Apple Interactive Sticker Effect</title>
        <style type="text/css">
            .box
            {
                width: 543px;
                height: 356px;
                position: relative;
                clear: both;
            }

            .background
            {
                position: absolute;
                top: 0px;
                left: 0px;
                z-index: 1;
            }

            #section
            {
                position: relative;
                float: left;
                width: 125px;
                height: 356px;
                z-index: 3;
                background-color: transparent;
            }

            .sticker
            {
                display: none;
                position: absolute;
                top: 0px;
                left: 0px;
                z-index: 2;
            }
        </style>

        <script type="text/javascript">
            function section_mouseover(element)
            {
                var number = element.getAttribute("data-part");
                var elementList = document.getElementsByClassName("sticker");
                for(var count = 0; count < elementList.length; count++)
                {
                    if(elementList[count].getAttribute("data-part") == number)
                    {
                        elementList[count].style.display = "inline-block";
                    }
                    else
                    {
                        elementList[count].style.display = "none";
                    }
                }
            }
        </script>
    </head>
    <body>
        <div class="box">
            <div id="section" onmouseover="section_mouseover(this);" data-part="1"></div>
            <div id="section" onmouseover="section_mouseover(this);" data-part="2"></div>
            <div id="section" onmouseover="section_mouseover(this);" data-part="3"></div>
            <div id="section" onmouseover="section_mouseover(this);" data-part="4"></div>
            <img class="background" src="images/background.jpg" />
            <img class="sticker" data-part="1" src="images/sticker1.png" />
            <img class="sticker" data-part="2" src="images/sticker2.png" />
            <img class="sticker" data-part="3" src="images/sticker3.png" />
            <img class="sticker" data-part="4" src="images/sticker4.png" />
        </div>
    </body>
Jul 31, 2014Narayan Prusty
Web Notification API Tutorial with ExampleMeasure Web Page Performance Using JavaScript
Comments: 1
  1. Daniel
    1 year ago

    Hey I really admire yyour work and skill set and would like to learn from you.
    I am new to web development. Could you please consider adding comments to your code so
    we can understand what is happening ? Do you have a youtube channel ?

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

3 years ago 1 Comment Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Create Raining Effect using JavaScript
  • JavaScript “0o” Literal
  • JavaScript “0b” Literal
  • Number Counter Animation using Javascript
  • Creating A Simple Backdrop Effect
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a developer, speaker, writer and consultant - focusing on HTML5, JavaScript, WordPress, Blockchain and Cordova. You can outsource your website or mobile app development to me.





Will get back to you soon!!!
HTML5
CSS3
JS
PHP
WordPress
MySQL
Intel XDK
AngularJS
NodeJS
Let's get started
My Books


2014 - 2015 © QNimate
All tutorials MIT license