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

[chukcha]

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

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

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

 

 

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

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

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

[chukcha]

09.11.2023 в 11:17, Eldaeron сказал:

До того, що в search console

можуть
Наприклад так

 

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

 

[markimax]

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

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

 

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

[chukcha]

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

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

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

[Eldaeron]

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

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

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

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

 

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

Цитата

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

 

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

 

 

 

 

 

 

 

[chukcha]

09.11.2023 в 11:59, Eldaeron сказал:

не замінювати головну картинку,

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


 

[markimax]

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

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

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

[Eldaeron]

В 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)
    }
}

 

 

[chukcha]

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

Вже йому хоч що пиши (хоч Гугл йому писати буде) він не прийме.

Ви хто? Де ваші аргументи?
Демагог ви наш.

[chukcha]

09.11.2023 в 12:06, Eldaeron сказал:

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

так, але є але.
Початкова Анімація повинна бути відкладена!!!

[hristkni_kopaion]

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

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

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

[markimax]

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

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

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

[chukcha]

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

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

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

 

 

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

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

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

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

[markimax]

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

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

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

[chukcha]

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

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

Це до вам!

 

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

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

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

 

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

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

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

[chukcha]

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

 

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

 

[markimax]

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

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

 

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

 

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

[buslikdrev]

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

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

 

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

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

[buslikdrev]

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

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

 

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

[chukcha]

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

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

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

Цитата

І прощавай LCP

 

[chukcha]

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

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

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

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