CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Muniza Siddiqui
Muniza Siddiqui

Reputation: 105

What is the easiest way I can transition an image/element to another image/element while dragging it?

Is there a way I can transition the sun to another image while dragging it? And if so what is it and what language should I use? I want to transition the sun to another darker sun which transitions into a moon while I am dragging it. Right now I am able to drag my sun in an arc. http://whatisupson.tumblr.com/

This is my code: 

    <style>
        /* Colors */
        body {
             background: url(http://i.imgur.com/aZty7Mq.png);
             animation: mymove 4s linear infinite;
             -webkit-animation: mymove 4s linear infinite;
             -moz-animation: mymove 4s linear infinite;
        }
        @keyframes mymove {
            0% { background-position: 0 0; }
            50% { background-position: 40% 0; }
        }
        #sun {
            position: absolute;
            width: 300px;
            height: 300px;
            top: 20%;
            left: 10%;
        }
    </style>

    <html>
    <body>
            <img id="sun" src="http://i.imgur.com/DGkZYZQ.png">
    </body>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
    var width = 300;
    var sun = $("#sun");

    sun.draggable({
        axis: "x",
        drag: function() {
            var x = sun.offset().left + (width / 2);
            var total = $(window).width();

            var heightPct = Math.pow((total/2) - x, 2) / Math.pow($(window).width() / 2, 2);
            console.log(x, $(window).width(), heightPct * 100);
            this.style["margin-top"] = "" + Math.round(heightPct * 30) + "%";
        }
    });
    </script>
    </html>

Upvotes: 1

Views: 70

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122087

Try this https://jsfiddle.net/twfegqgc/3/

I am using background color on element and the color changes on element position. So the color changes when element passes half of window and when it reach end of window. You can set image change instead but it's same principle.

JS

var sun = $("#sun");
var width = 100;

sun.draggable({
        axis: "x",
        drag: function() {
            var x = sun.offset().left + (width / 2);
            var total = $(window).width();

            var heightPct = Math.pow((total/2) - x, 2) / Math.pow($(window).width() / 2, 2);
            console.log(x, $(window).width(), heightPct * 100);
            this.style["margin-top"] = "" + Math.round(heightPct * 30) + "%";
        }
    });

$("#sun").bind("drag", function(event, ui) {
    var halfWidth = $(window).width() / 2;
    var left = $(this).offset().left + 100;
    var windowWIdth = $(window).width() - 200;
    var color = $('.color');

    $('.position').html(left);
    $('.window').html(windowWIdth);

    if(left < halfWidth) {
        color.css('background', 'yellow');
    }

    if(left > halfWidth) {
        color.css('background', 'red');
    } 

     if (left > windowWIdth) {
        color.css('background', 'black');
    }

});

HTML

<div id="sun" class="color"></div>
<div class="position"></div>
<div class="window"></div>

CSS

    body {
         background: url(http://i.imgur.com/aZty7Mq.png);
         animation: mymove 4s linear infinite;
         -webkit-animation: mymove 4s linear infinite;
         -moz-animation: mymove 4s linear infinite;
    }
    @keyframes mymove {
        0% { background-position: 0 0; }
        50% { background-position: 40% 0; }
    }
    #sun {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 20%;
        left: 10%;
        border-radius: 100px;
    }

    .color {
        background: yellow;
    }

UPDATE

Updated version with background-image https://jsfiddle.net/twfegqgc/4/

Upvotes: 1

Related Questions