Home
see everything
see everything
see everything
see everything
see everything
SEE PROJECTS
SEE PROJECTS
see PROJECTS
SEE PROJECTS
SEE PROJECTS
Projects
see everything
see everything
see everything
see everything
see everything
Contact
INSTAGRAM
FACEBOOK
+7 (924) 733-38-91
There is no design without discipline
First of all, I dive into your business and offer a convenient and modern solution. I understand how business differs from competitors, and I talk about it through the site.
Interaction design
Menu
SCROLL Down
Projects
The best ideas come as jokes. Make your thinking as funny as possible.
Contact
The best ideas come as jokes. Make your thinking as funny as possible.
Плавный скрол
Добавить код в блок T123 и опубликовать
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" integrity="sha256-huW7yWl7tNfP7lGk46XE+Sp0nCotjzYodhVKlwaNeco=" crossorigin="anonymous"></script>
<script>
SmoothScroll({
    // Время скролла 400 = 0.4 секунды
    animationTime    : 800,
    // Размер шага в пикселях 
    stepSize         : 75,

    // Дополнительные настройки:
    
    // Ускорение 
    accelerationDelta : 30,  
    // Максимальное ускорение
    accelerationMax   : 2,   

    // Поддержка клавиатуры
    keyboardSupport   : true,  
    // Шаг скролла стрелками на клавиатуре в пикселях
    arrowScroll       : 50,

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm   : true,
    pulseScale       : 4,
    pulseNormalize   : 1,

    // Поддержка тачпада
    touchpadSupport   : true,
})
</script>
Эффект для фото
Добавить код в блок T123 + добавить class для изображения "item"
Good design is obvious. Great design is transparent.
<style>

.hide {
    visibility:hidden;
}

/* Canvas */
.dom-gl {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
    
</style>
<script>

    $('.item').each(function() {
        $(this).find('.tn-atom').addClass('js-plane');
        $(this).find('.tn-atom__img').addClass('hide');
        let src = $(this).find('.tn-atom__img').attr('data-original');
        $(this).find('.tn-atom__img').attr('src', src);
    })
    if ( $('.item').length <= 2 ) {
        $(".item").clone().prependTo("body").css('display', 'none').find('.tn-atom__img').attr('src', '');
        $(".item").clone().prependTo("body").css('display', 'none').find('.tn-atom__img').attr('src', '');
        $(".item").clone().prependTo("body").css('display', 'none').find('.tn-atom__img').attr('src', '');
    } else if ( $('.item').length <= 5 ) {
        $(".item").clone().prependTo("body").css('display', 'none').find('.tn-atom__img').attr('src', '');
        $(".item").clone().prependTo("body").css('display', 'none').find('.tn-atom__img').attr('src', '');
    } else {
        $(".item").clone().prependTo("body").css('display', 'none').find('.tn-atom__img').attr('src', '');
    }
    $('.test').mouseenter(function(){
          $('#rec259613846 .tn-elem[data-elem-id="1607551649528"] img').trigger('mouseenter');
    });
    console.log($('.item').length)
</script>
<script type="text/javascript" src='https://gistcdn.githack.com/swan4er/ac8b53332d4db1730dcdb08412edd3af/raw/80958ce105d036096e2956e860fd97f9f1f281fe/wave-three.js'></script>
Эффект для фото
Добавить код в блок T123 + добавить class для изображения "item"
Good design is obvious. Great design is transparent.
Технический код
Добавить код в блок T123
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script><script>var hoverEffect=function(a){var b=a.parent||console.warn("no parent"),g=a.displacementImage||console.warn("displacement image missing"),e=a.image1||console.warn("first image missing"),f=a.image2||console.warn("second image missing"),d=a.intensity||1,l=a.speedIn||1.6,m=a.speedOut||1.2,r=void 0===a.hover?!0:a.hover,k=a.easing||Expo.easeOut,t=function(){var a=!1,b=navigator.userAgent||navigator.vendor||window.opera;if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(b)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(b.substr(0,4)))a=!0;return a},n=new THREE.Scene,p=new THREE.OrthographicCamera(b.offsetWidth/-2,b.offsetWidth/2,b.offsetHeight/2,b.offsetHeight/-2,1,1E3);p.position.z=1;var c=new THREE.WebGLRenderer({antialias:!1});c.setPixelRatio(window.devicePixelRatio);c.setClearColor(16777215,0);c.setSize(b.offsetWidth,b.offsetHeight);b.appendChild(c.domElement);a=new THREE.TextureLoader;a.crossOrigin="";e=a.load(e);f=a.load(f);g=a.load(g);g.wrapS=g.wrapT=THREE.RepeatWrapping;e.magFilter=f.magFilter=THREE.LinearFilter;e.minFilter=f.minFilter=THREE.LinearFilter;e.anisotropy=c.getMaxAnisotropy();f.anisotropy=c.getMaxAnisotropy();var h=new THREE.ShaderMaterial({uniforms:{effectFactor:{type:"f",value:d},dispFactor:{type:"f",value:0},texture:{type:"t",value:e},texture2:{type:"t",value:f},disp:{type:"t",value:g}},vertexShader:"\n        varying vec2 vUv;\n        void main() {\n          vUv = uv;\n          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n        }\n    ",fragmentShader:"\n        varying vec2 vUv;\n\n        uniform sampler2D texture;\n        uniform sampler2D texture2;\n        uniform sampler2D disp;\n\n        // uniform float time;\n        // uniform float _rot;\n        uniform float dispFactor;\n        uniform float effectFactor;\n\n        // vec2 rotate(vec2 v, float a) {\n        //  float s = sin(a);\n        //  float c = cos(a);\n        //  mat2 m = mat2(c, -s, s, c);\n        //  return m * v;\n        // }\n\n        void main() {\n\n            vec2 uv = vUv;\n\n            // uv -= 0.5;\n            // vec2 rotUV = rotate(uv, _rot);\n            // uv += 0.5;\n\n            vec4 disp = texture2D(disp, uv);\n\n            vec2 distortedPosition = vec2(uv.x + dispFactor * (disp.r*effectFactor), uv.y);\n            vec2 distortedPosition2 = vec2(uv.x - (1.0 - dispFactor) * (disp.r*effectFactor), uv.y);\n\n            vec4 _texture = texture2D(texture, distortedPosition);\n            vec4 _texture2 = texture2D(texture2, distortedPosition2);\n\n            vec4 finalTexture = mix(_texture, _texture2, dispFactor);\n\n            gl_FragColor = finalTexture;\n            // gl_FragColor = disp;\n        }\n    ",transparent:!0,opacity:1});d=new THREE.PlaneBufferGeometry(b.offsetWidth,b.offsetHeight,1);d=new THREE.Mesh(d,h);n.add(d);d=function(){var a="mouseenter",c="mouseleave";t()&&(a="touchstart",c="touchend");b.addEventListener(a,function(a){TweenMax.to(h.uniforms.dispFactor,l,{value:1,ease:k})});b.addEventListener(c,function(a){TweenMax.to(h.uniforms.dispFactor,m,{value:0,ease:k})})};r&&d();window.addEventListener("resize",function(a){c.setSize(b.offsetWidth,b.offsetHeight)});this.next=function(){TweenMax.to(h.uniforms.dispFactor,l,{value:1,ease:k})};this.previous=function(){TweenMax.to(h.uniforms.dispFactor,m,{value:0,ease:k})};var q=function(){requestAnimationFrame(q);c.render(n,p)};q()};</script>
Настройка
Добавить код в блок T123, поставить class на shape и заметь пути до изображения
<style>
    canvas{
        float:left;
    }
</style>
<script>
    var myAnimation = new hoverEffect({
    parent: document.querySelector('.img-effect .tn-atom'), //ссылка на shape
    image1: 'https://static.tildacdn.com/tild3565-3236-4538-b138-643763313165/1bg.jpg', //ссылка на фото 1
    image2: 'https://static.tildacdn.com/tild3565-3236-4538-b138-643763313165/1bg.jpg', //ссылка на фото 2
    displacementImage: 'https://static.tildacdn.com/tild6266-3239-4237-a566-633234386235/4.png' //ссылка на фото-паттерн для анимации
});
</script>
Made on
Tilda