Эффект для фото с html, css и Java Script

Эффект для фото с html, css и Java Script

Многим приятно зайти на чей нибудь сайт и наблюдать в нём разнообразные, красивые эффекты. Выпадающие блоки, всплывающие окна, красивый эффект когда наводите на кнопки и фото, всё это делает наш сайт живым и не скучным. Ниже хочу показать вам готовый js код который без особого труда и знаний вы сможете применить у себя на сайте.

Для этого нужно лишь внимательно прочитать, скопировать и применить его у себя.

Эта статья не является учебным пособием, а создана в целях ознакомления как пример готового кода. Как готовое решение при создании того или иного эффекта и как при этом пишется нужный код. 

Красивый эффект для фото

Красивый эффект для фото

Посмотреть пример можно на этой странице 404.

Этот эффект больше подойдёт для отдельной страницы сайта. Особенно это красиво смотрится на большом изображении, например страница контакты, отдельной статье блога или страница 404. Конечно же поковыряв готовый js код, если вы разбираетесь в верстке и хоть немножечко в Java Script, этот эффект можно настроить и для общей страницы, где большое количество разнообразного фото.

Небольшое уточнение:

  • Что бы создать красивый эффект для своего фото, js код нужно применять именно к img, а не к background-image
  • Что бы эффект применился только к определённым изображением, нужно им прописать классы и указать их в коде Java Script.

Готовый код, что бы создать красивый эффект для своего сайта

HTML

<div class="img">
    <img src="img/banner-3.jpg" alt="foto">
	<div class="img__text">
		Готовый код для плавающего изображения на сайте
	</div>
</div>

Код CSS для примера такой

div.img{
  width: 70%;
  height: 100vh;
  position: relative;
  margin: 0px auto;
  overflow: hidden;
}
div.img img{
  width: 100%;
  height: 100%;
}
.img__text{
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 30px;
  z-index: 100;
  padding: 0 20px;
  
}
div.img:after{
  content: '';
  background-color: rgba(0,0,0,0.50);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Перед закрывающим тегом body вставьте этот код

<script>
        var lFollowX = 0,
            lFollowY = 0,
            x = 0,
            y = 0,
            friction = 1 / 30;

        function animate() {
            x += (lFollowX - x) * friction;
            y += (lFollowY - y) * friction;

            translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';

            $('img').css({   //Указываете изображения для эффекта, тэги, классы и id
                '-webit-transform': translate,
                '-moz-transform': translate,
                'transform': translate
            });

            window.requestAnimationFrame(animate);
        }

        $(window).on('mousemove click', function (e) {

            var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
            var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
            lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
            lFollowY = (10 * lMouseY) / 100;

        });

        animate();
    </script>

Еще один красивый эффект который можно применить к фото

эффект для фото

Посмотреть пример можно на готовом шаблоне для сайта по этой ссылке

Этот красивый эффект, блик, отлично впишется с вашей фотогалереей. Создан он с помощью html и css, что делает его вес минимальным. Применить его тоже не составит особого труда, нужно всего лишь скопировать и вставить готовый код у себя на странице. По желанию можно поменять классы на свои.

HTML

<div class="service-gridbygrid hover14">
    <a href="single.html" class="action">
        <figure><img src="https://cdn.shortpixel.ai/client/q_glossy,ret_img,w_800,h_400/https://stockshablonov.com/wp-content/uploads/2020/07/gotovyy-shablon-404-1.jpg" alt="image" class="img-responsive img-fluid"></figure>
    </a>
</div>

CSS

.service-gridbygrid{
  width: 70%;
  margin: 100px auto;
  overflow: hidden;
}
.hover14 figure {
  position: relative;
  margin: 0px;
  overflow: hidden; }

.hover14 figure::before {
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: skewX(-25deg); }

  .hover14 figure:hover::before {
  -webkit-animation: shine .75s;
  animation: shine .75s; }

@-webkit-keyframes shine {
  100% {
    left: 125%; } }

@keyframes shine {
  100% {
  left: 100%; } }

Еще один простой, плавный и красивый эффект который подходит для отдельных фото и фотогалереи.

Эффект для фото

HTML

<div class="container">
  <div class="div-img" >
    <img class="img" src="https://cdnimg.rg.ru/img/content/165/89/88/kinopoisk.ru-Shrek-2-644132_d_850.jpg" title="Фото эффект" alt="Фото эффект">
    <div class="text">Здесь ваш текст!</div>
  </div>
</div>

CSS

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
}
.transition {
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}
.container {
  position: relative;
  width: 300px;
  height: 300px;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 20px;
}
.div-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  hright: 300px;
}
.div-img .img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 300px;
  -webkit-transform: 0px 0px 1;
  -moz-transform: 0px 0px 1;
  -ms-transform: 0px 0px 1;
  -o-transform: 0px 0px 1;
  transform: 0px 0px 1;
  transform: translate(0px, 0px) scale(1);
  -webkit-transform: translate(0px, 0px) scale(1);
  -moz-transform: translate(0px, 0px) scale(1);
  -o-transform: translate(0px, 0px) scale(1);
  -ms-transform: translate(0px, 0px) scale(1);
  -webkit-transition: all 0s ease 0s;
  -moz-transition: all 0s ease 0s;
  -o-transition: all 0s ease 0s;
  transition: all 0s ease 0s;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}
.div-img .text {
  font-family: 'Open Sans';
  position: relative;
  z-index: -1;
  display: block;
  bottom: 20px;
  width: 100%;
  text-align: center;
  -webkit-transform: 0px 0px 1;
  -moz-transform: 0px 0px 1;
  -ms-transform: 0px 0px 1;
  -o-transform: 0px 0px 1;
  transform: 0px 0px 1;
  transform: translate(0px, 0px) scale(1);
  -webkit-transform: translate(0px, 0px) scale(1);
  -moz-transform: translate(0px, 0px) scale(1);
  -o-transform: translate(0px, 0px) scale(1);
  -ms-transform: translate(0px, 0px) scale(1);
  -webkit-transition: all 0s ease 0s;
  -moz-transition: all 0s ease 0s;
  -o-transition: all 0s ease 0s;
  transition: all 0s ease 0s;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}
.div-img:hover .img {
  -webkit-transform: 0px -30px 0.5;
  -moz-transform: 0px -30px 0.5;
  -ms-transform: 0px -30px 0.5;
  -o-transform: 0px -30px 0.5;
  transform: 0px -30px 0.5;
  transform: translate(0px, -30px) scale(0.5);
  -webkit-transform: translate(0px, -30px) scale(0.5);
  -moz-transform: translate(0px, -30px) scale(0.5);
  -o-transform: translate(0px, -30px) scale(0.5);
  -ms-transform: translate(0px, -30px) scale(0.5);
  border-radius: 50%;
}
.div-img:hover .text {
  -webkit-transform: 0px 0px 2;
  -moz-transform: 0px 0px 2;
  -ms-transform: 0px 0px 2;
  -o-transform: 0px 0px 2;
  transform: 0px 0px 2;
  transform: translate(0px, 0px) scale(2);
  -webkit-transform: translate(0px, 0px) scale(2);
  -moz-transform: translate(0px, 0px) scale(2);
  -o-transform: translate(0px, 0px) scale(2);
  -ms-transform: translate(0px, 0px) scale(2);
}

Все изображения были взяты с сайта unsplash.com, сайт бесплатных графических ресурсов.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

1 + 12 =