Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Вывод картинок - плавно. Возможно ли?


Recommended Posts

09.11.2023 в 11:38, markimax сказал:

Ну прочитайте вже повідомлення

що ви там прочитали? Розкажіть.
Порівняли його слова з моїми? Або ви, як мале, вчепилися в пипку.

 

 

09.11.2023 в 11:38, markimax сказал:

Ви публікуєте данні (кількість продажів, аналітику чи т п)  своїх клієнтів без їх згоди?

Я? Марк марить.

Link to comment
Share on other sites

В 09.11.2023 в 11:49, chukcha сказав:

Так що то було?

 

А ви не слідкуєте ? АП Гугла. А потім фікс помилок. А ви в курсі що вчора почався новий АП Гугла?

Link to comment
Share on other sites

09.11.2023 в 11:51, markimax сказал:

А ви не слідкуєте ? АП Гугла. А потім фікс помилок. А ви в курсі що вчора почався новий АП Гугла?

Ви читати вмієте????
Бачу - що ні
Що там написано справа? А чому?
 

Link to comment
Share on other sites

В 09.11.2023 в 08:17, wwizard сказав:

Всем доброго дня - наткнулся на такой ресурс - вывод картинки в карточке товара. Насколько сложно такое повторить в Опенкарте?

Т.е. когда часть стоит на месте, а при выборе опции цвета, перещелкивается тольк часть картинки. В тоже время основные фото самого товара размещенные ниже не задействуются если их не нажать.

Взагалі не проблема.

 

Модуль щось похожий до "Залежні опції"

Цитата

2. Є можливість додати картинки до опцій, при виборі опції змінюється головна картинка

 

Тільки вам потрібно не замінювати головну картинку, а додати/замінити картинку підкладку.

 

 

 

 

 

 

 

Link to comment
Share on other sites

В 09.11.2023 в 11:34, chukcha сказав:

мАлоденький!

Короче. Чукчу порвало :-D
Попали в "точку" йому.
Завіса. Вже йому хоч що пиши (хоч Гугл йому писати буде) він не прийме.
 

  • +1 1
Link to comment
Share on other sites

В 09.11.2023 в 12:02, chukcha сказав:

там так зроблено! (плюс анімація)


 

за анімацію це взалагі просто css)

 

Прихований текст
#preview {
    min-height: 397px;
}
#preview {
    overflow: hidden!important;
}
#preview {
    user-select: none;
}
.preview {
    max-width: 100%;
}
.preview {
    position: relative;
    cursor: pointer;
    display: inline-block
}
.preview-image {
    -webkit-animation: showPreviewItem .7s .1s ease both;
    -moz-animation: showPreviewItem .7s .1s ease both;
    -ms-animation: showPreviewItem .7s .1s ease both;
    animation: showPreviewItem .7s .1s ease both;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.preview-image--base {
    position: relative;
    width: auto;
    -webkit-animation: fadeIn .7s ease both;
    -moz-animation: fadeIn .7s ease both;
    -ms-animation: fadeIn .7s ease both;
    animation: fadeIn .7s ease both;
}

.preview-image--base ~ .preview-image--base {
    position: absolute
}

.preview-image--hide {
    -webkit-animation: hidePreviewItem .3s ease both;
    -moz-animation: hidePreviewItem .3s ease both;
    -ms-animation: hidePreviewItem .3s ease both;
    animation: hidePreviewItem .3s ease both
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-moz-keyframes showPreviewItem {
    0% {
        -webkit-transform: translate(50px,20px);
        -moz-transform: translate(50px,20px);
        -ms-transform: translate(50px,20px);
        transform: translate(50px,20px);
        opacity: 0
    }

    100% {
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -ms-transform: translate(0,0);
        transform: translate(0,0);
        opacity: 1
    }
}

@-webkit-keyframes showPreviewItem {
    0% {
        -webkit-transform: translate(50px,20px);
        -moz-transform: translate(50px,20px);
        -ms-transform: translate(50px,20px);
        transform: translate(50px,20px);
        opacity: 0
    }

    100% {
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -ms-transform: translate(0,0);
        transform: translate(0,0);
        opacity: 1
    }
}

@-o-keyframes showPreviewItem {
    0% {
        -webkit-transform: translate(50px,20px);
        -moz-transform: translate(50px,20px);
        -ms-transform: translate(50px,20px);
        transform: translate(50px,20px);
        opacity: 0
    }

    100% {
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -ms-transform: translate(0,0);
        transform: translate(0,0);
        opacity: 1
    }
}

@keyframes showPreviewItem {
    0% {
        -webkit-transform: translate(50px,20px);
        -moz-transform: translate(50px,20px);
        -ms-transform: translate(50px,20px);
        transform: translate(50px,20px);
        opacity: 0
    }

    100% {
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -ms-transform: translate(0,0);
        transform: translate(0,0);
        opacity: 1
    }
}

@-moz-keyframes hidePreviewItem {
    0% {
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -ms-transform: translate(0,0);
        transform: translate(0,0);
        opacity: 1
    }

    100% {
        -webkit-transform: translate(-50px,-20px);
        -moz-transform: translate(-50px,-20px);
        -ms-transform: translate(-50px,-20px);
        transform: translate(-50px,-20px);
        opacity: 0
    }
}

@-webkit-keyframes hidePreviewItem {
    0% {
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -ms-transform: translate(0,0);
        transform: translate(0,0);
        opacity: 1
    }

    100% {
        -webkit-transform: translate(-50px,-20px);
        -moz-transform: translate(-50px,-20px);
        -ms-transform: translate(-50px,-20px);
        transform: translate(-50px,-20px);
        opacity: 0
    }
}

@-o-keyframes hidePreviewItem {
    0% {
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -ms-transform: translate(0,0);
        transform: translate(0,0);
        opacity: 1
    }

    100% {
        -webkit-transform: translate(-50px,-20px);
        -moz-transform: translate(-50px,-20px);
        -ms-transform: translate(-50px,-20px);
        transform: translate(-50px,-20px);
        opacity: 0
    }
}

@keyframes hidePreviewItem {
    0% {
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -ms-transform: translate(0,0);
        transform: translate(0,0);
        opacity: 1
    }

    100% {
        -webkit-transform: translate(-50px,-20px);
        -moz-transform: translate(-50px,-20px);
        -ms-transform: translate(-50px,-20px);
        transform: translate(-50px,-20px);
        opacity: 0
    }
}

@-moz-keyframes fadeScale {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        transform: scale(1.5)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes fadeScale {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        transform: scale(1.5)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-o-keyframes fadeScale {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        transform: scale(1.5)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes fadeScale {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        transform: scale(1.5)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-moz-keyframes fadeInTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes fadeInTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-o-keyframes fadeInTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

 

 

Link to comment
Share on other sites

В 09.11.2023 в 10:52, markimax сказав:

А причому тут колір та фактура до анімації. Я щось не зрозумів.
Колір та фактуру добре видно і на простому "статичному" зображенні (чи thumb зображеннях)

А при тому, що так ГАРНІШЕ. Я жінка, і подивилася на сайт суто з точки зору покупця (а такі речі зазвичай купують саме жінки). Жінки на такі "плюшки" дуже звертають увагу. Так, чоловіків подібні "мультики" дратують. Але продажі - це не тільки швидкість, це і психологія.

  • +1 2
Link to comment
Share on other sites


В 09.11.2023 в 12:22, hristkni_kopaion сказав:

А при тому, що так ГАРНІШЕ. Я жінка, і подивилася на сайт суто з точки зору покупця (а такі речі зазвичай купують саме жінки). Жінки на такі "плюшки" дуже звертають увагу. Так, чоловіків подібні "мультики" дратують. Але продажі - це не тільки швидкість, це і психологія.

"Та да"... А ви подумали про юзабіліті. Коли вийшли всі ці анімашки, паралакси та т п, Google провів дослідження (фокус групи та тп, ресурсів в нього самі знаєте скільки щоб проводити такі дослідження), та виявило що від цих анімашок людей навіть тошнить (реально тошнить (а що жінок "не тошнотить" чи вони з іншого "тіста" зроблені, а це вже сексизм)), головні болі та т п. Тому він і ввів що стрибки блоків (CLS) дратують користувачів і вони просто закривають такі сайти (і жінки теж). Що попапи та анімашки шкідливі і за це він взагалі песимізує ... і ось чому виявилася пряма залежність конверсії від Core Web Vitals

Link to comment
Share on other sites

09.11.2023 в 12:31, markimax сказал:

Тому він і ввів що стрибки блоків (CLS) дратують користувачів

Та нема там стрибків, Марк бачить те, чого там не має.

 

 

09.11.2023 в 12:31, markimax сказал:

ось чому виявилася пряма залежність конверсії від Core Web Vitals

знову марево від марка

Пруф на дослідження!!!

Link to comment
Share on other sites

В 09.11.2023 в 12:57, chukcha сказав:

Та нема там стрибків, Марк бачить те, чого там не має.
Пруф на дослідження!!!

Чукча ... )
Мова не йде про цю тему. Уважно читай. Причому тут CLS, до "цієї" анімації. По цій темі я написав - "прощавай LCP". І так там з LCP просто "печаль" з-за анімації (>8)
Ти різницю бачиш CLS та LCP... LCP та CLS :grin: Щось тебе коротить та порвало, бо не "по твоєму". Тобі вже факти пруфів, приводив колега @Eldaeron ...Ти їх хоч  прочитав. Ні. Тобі хоч сам Google напише тут відповідь ти її не прочитаєш та не приймеш, бо вона не збігається з твоїми "хащами". Заспокойся (навіщо !!! 3 знаки оклика, я й один розумію :-D), нервувати це погано )

Link to comment
Share on other sites

09.11.2023 в 13:23, markimax сказал:

Уважно читай.

Це до вам!

 

09.11.2023 в 13:23, markimax сказал:

обі вже факти пруфів, приводив колега

марк з демагогією. Я процитував його, але марк не бачить (та навіщо це йому) У марка немає пруфів на дослідження, або марк марить.

 

09.11.2023 в 13:23, markimax сказал:

Google напише тут відповідь

Надайте те що він написав

Link to comment
Share on other sites

В 09.11.2023 в 13:38, chukcha сказав:

Уявляєте гугл провів дослідження, але
https://developer.chrome.com/articles/scroll-driven-animations/

 

також розказує про анімацію

 

Ну класно маніпулювати.  Я б теж так робив років в 30...
Чукча... я знаю ти самий "кльовий". Але "ніт" - не катить.
Це просто дока. Давай далі.
Покликала вихователь... кажуть кльовий попкорн роздають

Link to comment
Share on other sites

09.11.2023 в 11:47, chukcha сказал:

Где там анимация, которая может начаться через 3 сек.

 

На "зеленых попугаев" это никак не влияет

Конкретно на этом сайте есть анимация и она влияет. Но можно обойтись без неё и добавить стиль анимации только при смене картинки.

Link to comment
Share on other sites

09.11.2023 в 09:17, wwizard сказал:

Всем доброго дня - наткнулся на такой ресурс - вывод картинки в карточке товара. Насколько сложно такое повторить в Опенкарте?

 

На 200$ по сложности. Написать скрипт смены изображения и дизайн, написать модификатор добавления изображений для опций и размеры настроек.

Link to comment
Share on other sites

10.11.2023 в 02:48, buslikdrev сказал:

онкретно на этом сайте есть анимация и она влияет.

Я не говорил про этот сайт, я говорил про
 

Цитата

І прощавай LCP

 

Link to comment
Share on other sites

09.11.2023 в 23:59, markimax сказал:

Ну класно маніпулювати. 

Де маніпуляція?

Анімація існує? Це Гугл про неї говорить?
Де пруф на дослідження гугл про те як впливає анімація на користувачів?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.