Плавная анимация изображений в управляемом цикле на javascript с параметрами, SVG и CSS

Стили

<style>
    #call_svg3, #call_svg2, #call_svg1 {
        position:absolute;
    }
    #call_svg1 {
        width:72px;
        height:72px;
        z-index:450000;
        top:20px;
        left:10px
    }
    #call_svg2 {
        width:88px;
        height:88px;
        z-index:350000;
        top:11px;
        left:2px;
    }
    #call_svg3 {
        width:104px;
        height:104px;
        z-index:250000;
        top:2px;
        left:-6px;
    }
    #call_svg2, #call_svg3 {
        display:none;
    }
    .right_rotate_call {
        -webkit-transform: rotate(30deg);
        -moz-transform:rotate(30deg);
        -o-transform:rotate(30deg);
        -ms-transform:rotate(30deg);
        transform:rotate(30deg);
        -webkit-transition:all 500ms;
        -moz-transition:all 500ms;
        -o-transition:all 500ms;
        transition:all 500ms;
    }
    .left_rotate_call {
        -webkit-transform: rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
        -webkit-transition:all 500ms;
        -moz-transition:all 500ms;
        -o-transition:all 500ms;
        transition:all 500ms;
    }
</style>


Шаблон

<?php
$w = new Worktime();
//ниже проверяем не является ли следующий день праздничным. если да, то высчитываем следующий рабочий день
$day = date('Y-m-d', time());
$w->getnextworkday($day);
$randomforscript = rand(10000000, 99999999);
?>
<div id="callbuton" data-toggle="tooltip" data-html="true" class="cbutinwork tip-right" title="<div class=customtooltipcall>Заказать обратный звонок</div>">
    <?php if($w->workhour && !$w->hollyday) { ?>
        <img src="/img/call/back-1.svg" id="call_svg1"/>
        <img src="/img/call/back-2.svg" id="call_svg2"/>
        <img src="/img/call/back-3.svg" id="call_svg3"/>
    <?php } else { ?>
        <img src="/img/call/back-grey-1.svg" id="call_svg1"/>
        <img src="/img/call/back-grey-2.svg" id="call_svg2"/>
        <img src="/img/call/back-grey-3.svg" id="call_svg3"/>
    <?php } ?>
</div>
<script type="text/javascript" src="/js/call/jquery.mask.js"></script>
<script id="scriptdays" type="text/javascript" data-goodnextworkday="<?php echo $w->goodnextworkday?>"  data-hollyday="<?php echo $w->hollyday?>" src="/js/call/call.js?<?php echo $randomforscript?>"></script>

Скрипт

/**
 * Created by maksimus on 04.04.2017.
 */

var dd = document.getElementById("scriptdays").getAttribute("data-goodnextworkday");
console.log("next work day: " + dd);
var hollydays = document.getElementById("scriptdays").getAttribute("data-hollyday");
console.log("weekend: " + hollydays);

//если сейчас выходной или праздничный день
if(hollydays == 1) {
    console.log('weekend detected');
    var secondclass = " animation_container_workout";
    var displaycallformnone = " style=\"display:none !important;\"";
    var displaynone = "";
} else {
    var displaycallformnone = "";
    var secondclass = "";
    var displaynone = " style=\"display:none;\"";
}

var polulistbox = '<select id="polubox">';
polulistbox += '<option value="10 : 00">10 : 00</option>';
polulistbox += '<option value="10 : 30">10 : 30</option>';
polulistbox += '<option value="11 : 00">11 : 00</option>';
polulistbox += '<option value="11 : 30">11 : 30</option>';
polulistbox += '<option value="12 : 00">12 : 00</option>';
polulistbox += '<option value="12 : 30">12 : 30</option>';
polulistbox += '<option value="13 : 00">13 : 00</option>';
polulistbox += '<option value="13 : 30">13 : 30</option>';
polulistbox += '<option value="14 : 00">14 : 00</option>';
polulistbox += '<option value="14 : 30">14 : 30</option>';
polulistbox += '<option value="15 : 00">15 : 00</option>';
polulistbox += '<option value="15 : 30">15 : 30</option>';
polulistbox += '<option value="16 : 00">16 : 00</option>';
polulistbox += '<option value="16 : 30">16 : 30</option>';
polulistbox += '<option value="17 : 00">17 : 00</option>';
polulistbox += '<option value="17 : 30">17 : 30</option>';
polulistbox += '</select>';

function viewImages() {
    setTimeout(function() {
        window.document.getElementById("call_svg2").style.display = "block";
        setTimeout(function() {
            window.document.getElementById("call_svg3").style.display = "block";
            setTimeout(function() {
                window.document.getElementById("call_svg2").style.display = "none";
                window.document.getElementById("call_svg3").style.display = "none";
            }, 200);
        }, 200);
    }, 200);
    window.callalanimation = setTimeout("viewImages()",1900);
}

//метод плавно вращает кнопку с помощью css3
function rotateCall() {
    window.call_element = window.document.getElementById("call_svg1");
    setTimeout(function() {
        window.call_element.classList.add("right_rotate_call");
        setTimeout(function() {
            setTimeout(function() {
                window.call_element.classList.add("left_rotate_call");
                setTimeout(function() {
                    window.call_element.classList.remove("right_rotate_call");
                    window.call_element.classList.remove("left_rotate_call");
                }, 500);
            }, 500);
        }, 500);
    }, 500);
    window.rotatealanimation = setTimeout("rotateCall()",2000);
}
var workhours = [9,10,11,12,13,14,15,16,17];
var datehour = new Date();
var currenthour = datehour.getHours();
console.log("current hour: " + currenthour);
var goodhour = workhours.indexOf(currenthour);
if(goodhour !== -1) var workhour = 1;

function feedbackcall() {
    $('body').append(callform1);
    $('body').addClass('stop-scrolling');
    if(!workhour || (hollydays == 1)) {
        $('.callform').hide();
        $('.animation_container').addClass('animation_container_workout');
        $('.callform4').show();
    }
    $('#callbuton').hide();
}

window.onload = function(){
    viewImages();
    rotateCall();
}

$(document).ready(function() {

    jQuery(".tip-right").tooltip({
        placement : 'right',
        container: 'body'
    });

    $('#callbuton').bind('mousewheel DOMMouseScroll', function(e) {
        var scrollTo = null;

        if (e.type == 'mousewheel') {
            scrollTo = (e.originalEvent.wheelDelta * -1);
        }
        else if (e.type == 'DOMMouseScroll') {
            scrollTo = 40 * e.originalEvent.detail;
        }

        if (scrollTo) {
            e.preventDefault();
            $(this).scrollTop(scrollTo + $(this).scrollTop());
        }
    });

    $('#callbuton').click(function(){
        //сначала выключаем таймер анимации кнопки
        clearTimeout(window.callalanimation);
        //выключаем таймер поворота кнопки
        clearTimeout(window.rotatealanimation);
        feedbackcall();
    });

    $('.navbar .dropdown').hover(function() {
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
    }, function() {
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
    });

    $(window).scroll(function() {
        if ($(document).scrollTop() > 40) {
            $('.navbar-cloud').addClass('navbar-shadow');
        } else {
            $('.navbar-cloud').removeClass('navbar-shadow');
        }
    });

    $("#phone").mask("+7 (999) 999-99-99");
    $("#phone_workout").mask("+7 (999) 999-99-99");

});

function hideformclose() {
    $('.splash_overlay').hide();
    $('body').removeClass('stop-scrolling');
    $('.splash_overlay').remove();
    $('#callbuton').show();
    jQuery(function($){
        $("#phone").mask("+7 (999) 999-99-99");
    });
    //снова запускаем таймер анимации кнопки
    viewImages();
    rotateCall();
}

Компонент

<?php
/**
 * Created by PhpStorm.
 * User: maksimus
 * Date: 03.04.2017
 * Time: 12:27
 */
class Worktime {

    private $workhours = array(9,10,11,12,13,14,15,16,17);
    public $workhour = false;

    public $goodnextworkday = '';

//массив праздничных дней на 2017 год
//для тестирования праздничного дня добавляем в массив следующий день или два дня
    public $noworkdayys = array(
        0 => array(),
        1 => array(1,2,3,4,5,6,7,8,14,15,21,22,28,29),
        2 => array(4,5,11,12,18,19,23,24,25,26),
        3 => array(4,5,8,11,12,18,19,25,26),
        4 => array(1,2,8,9,15,16,22,23,29,30),
        5 => array(1,6,7,8,9,13,14,20,21,27,28),
        6 => array(3,4,10,11,12,17,18,24,25),
        7 => array(1,2,8,9,15,16,22,23,29,30),
        8 => array(5,6,12,13,19,20,26,27),
        9 => array(2,3,9,10,16,17,23,24,30),
        10 => array(1,7,8,14,15,21,22,28,29),
        11 => array(4,5,6,11,12,18,19,25,26),
        12 => array(2,3,9,10,16,17,23,24,30,31)
    );

    public $month;
    public $day;
    public $monthdayas;
    public $hollyday;

    public function __construct() {
        $this->month = date("n",time());
        $this->day = date("d",time());
        $this->monthdayas = $this->noworkdayys[$this->month];
        $this->hollyday = in_array($this->day,$this->monthdayas);
        $currenthour = date("H",time());
        $this->workhour = in_array($currenthour,$this->workhours);
    }

    public function getnextworkday($day) {
        $nextday = $day;
        $goodday = $this->checknextday($nextday);
        if(!$goodday) {
            $nextday = date('Y-m-d', strtotime('+1 day', strtotime($nextday)));
            $this->getnextworkday($nextday);
        } else {
            $goodnextday = date('d.m.Y', strtotime('+1 day', strtotime($nextday)));
            //echo $goodnextday;
            $this->goodnextworkday = $goodnextday;
            //echo $goodnextworkday; exit;
        }
    }

//метод проверяет наличие указанного дня в списке праздничных и возвращает true или false
    public function checknextday($nextday) {
        $month = date("n",strtotime('+1 day', strtotime($nextday)));
        $day = date("d",strtotime('+1 day', strtotime($nextday)));
        $monthdayas = $this->noworkdayys[$month];
        $hollyday = in_array($day,$monthdayas);
        if($hollyday != 1) {
            return true;
        }
    }

}

0 комментариев

Автор топика запретил добавлять комментарии