powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как реализовать такие эффекты?
16 сообщений из 16, страница 1 из 1
Как реализовать такие эффекты?
    #39197483
Ролг Хупин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
...
Рейтинг: 0 / 0
Как реализовать такие эффекты?
    #39198365
maxkar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Второе - это CSS transform. С его помощью можно много чего сделать. В данном конкретном случае
Код: css
1.
2.
3.
.elementclass {
  transform: translate3d(250px, 0px, -800px) rotateY(-20deg);
}


(взято инспектором прямо из сайта)
...
Рейтинг: 0 / 0
Как реализовать такие эффекты?
    #39198759
Ролг Хупин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
maxkarВторое - это CSS transform. С его помощью можно много чего сделать. В данном конкретном случае
Код: css
1.
2.
3.
.elementclass {
  transform: translate3d(250px, 0px, -800px) rotateY(-20deg);
}


(взято инспектором прямо из сайта)

понял, спасибо.

А первый пункт все-таки как ?
...
Рейтинг: 0 / 0
Как реализовать такие эффекты?
    #39199086
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ролг ХупинmaxkarВторое - это CSS transform. С его помощью можно много чего сделать. В данном конкретном случае
Код: css
1.
2.
3.
.elementclass {
  transform: translate3d(250px, 0px, -800px) rotateY(-20deg);
}


(взято инспектором прямо из сайта)

понял, спасибо.

А первый пункт все-таки как ?
Открываешь Developer Tools, запускаешь профайлер, наводишь курсор на картинку, останавливаешь профайлер.
Смотришь, что выполнялось на странице, и находишь скрипт:
https://www.simple-talk.com/static/versioned/3e62335f7e28118064c631b9a3a32e46/js/corner-peel.js?v=105

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
require(["jquery"], function($) {
    $(document).ready(function () {
        var entireCornerPeel = $("#corner-peel"),
        cornerPeelFront = $("#corner-peel img"),
        cornerPeelBehind = $("#corner-peel-behind"),
        bringCornerPeelToFront = function () {
            entireCornerPeel.css({ "z-index": 200 });
        },
        bringCornerPeelToBack = function () {
            entireCornerPeel.css({ "z-index": 50 });
        },
        resizeCornerPeelToDefault = function () {
            cornerPeelFront.stop().animate({
                width: '82px',
                height: '85px'
            }, 220);
            cornerPeelBehind.stop().animate({
                width: '80px',
                height: '80px'
            }, 200, bringCornerPeelToBack); //Note this one retracts a bit faster (to prevent glitching in IE)
        };
        if (location.pathname === "/") {
            setTimeout(function () {
                cornerPeelFront.stop().animate({
                    width: '125px',
                    height: '125px'
                }, 500);

                cornerPeelBehind.stop().animate({
                    width: '122px',
                    height: '120px'
                }, 500, function () {
                    setTimeout(resizeCornerPeelToDefault, 1000);
                });
            }, 1000);
        }

        entireCornerPeel.hover(function () {
            $([cornerPeelFront.get(0), cornerPeelBehind.get(0)]).stop().animate({
                width: '307px',
                height: '318px'
            }, 500);
            bringCornerPeelToFront();
        }, resizeCornerPeelToDefault);
    });
});
...
Рейтинг: 0 / 0
Как реализовать такие эффекты?
    #39199131
Активист
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
skyANA,

что там в правом-верхнем углу? не вижу.
...
Рейтинг: 0 / 0
Как реализовать такие эффекты?
    #39199245
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
АктивистskyANA,

что там в правом-верхнем углу? не вижу.
С мобильных устройств не видно, зайди с десктопа.
...
Рейтинг: 0 / 0
Как реализовать такие эффекты?
    #39199748
Ролг Хупин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
skyANAАктивистskyANA,

что там в правом-верхнем углу? не вижу.
С мобильных устройств не видно, зайди с десктопа.

можно на пальцах объяснить: при наведении мыши в правы верхний угол стриницы там типа страница книжки, вот так туда-сюда открывается, подзадоривая юзера кликнуть туда
...
Рейтинг: 0 / 0
Как реализовать такие эффекты?
    #39199855
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ролг Хупин,
Суслика видишь? ))
- на фоксе не вижу ничего в углу))
...
Рейтинг: 0 / 0
Как реализовать такие эффекты?
    #39200040
Активист
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
skyANAАктивистskyANA,

что там в правом-верхнем углу? не вижу.
С мобильных устройств не видно, зайди с десктопа.значится так...все в десктопе Win 10.
IE11 - показывает закладку, но страница крашится с ощибкой js.
Chrome - пусто
EDGE - показывает зкладку, работает ноормально.

Вы, что все уже на ЁЖ перешли?
...
Рейтинг: 0 / 0
Как реализовать такие эффекты?
    #39200160
Уважаемый автор
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
АктивистskyANAпропущено...

С мобильных устройств не видно, зайди с десктопа.значится так...все в десктопе Win 10.
IE11 - показывает закладку, но страница крашится с ощибкой js.
Chrome - пусто
EDGE - показывает зкладку, работает ноормально.

Вы, что все уже на ЁЖ перешли?

потому что это все ЗЛО!
не надо фигней маяться!
заняться что ли не чем? кроме как этими свистоперделками заниматься?
...
Рейтинг: 0 / 0
Как реализовать такие эффекты?
    #39200180
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
АктивистВы, что все уже на ЁЖ перешли?
Фигёж! :) Chrome: version 49.0.2623.87 m
...
Рейтинг: 0 / 0
Как реализовать такие эффекты?
    #39200182
Активист
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
skyANAФигёж! :) Chrome: version 49.0.2623.87 mога, AdBlock вырезал эту куиту. отключил - заработало и на хроме.
...
Рейтинг: 0 / 0
Как реализовать такие эффекты?
    #39200183
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
АктивистskyANAФигёж! :) Chrome: version 49.0.2623.87 mога, AdBlock вырезал эту куиту
И зачем же ты время-то на куиту потратил? :)
...
Рейтинг: 0 / 0
Как реализовать такие эффекты?
    #39200185
Активист
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
skyANAИ зачем же ты время-то на куиту потратил? :)у меня ядер много - многопоточный режим.
...
Рейтинг: 0 / 0
Как реализовать такие эффекты?
    #39200186
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
АктивистskyANAИ зачем же ты время-то на куиту потратил? :)у меня ядер много - многопоточный режим.
Всякой куитой будешь нагружать - быстро закончатся.
...
Рейтинг: 0 / 0
Как реализовать такие эффекты?
    #39200411
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
АктивистAdBlock вырезал
надо же))).
Хоть бы он мессаги когда выдавал, когда вырезает).
...
Рейтинг: 0 / 0
16 сообщений из 16, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как реализовать такие эффекты?
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]