[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Помогите с CSS, будьте котэ :)
Страницы: 1, 2
Идален
Знаю, что пишу малость не по адресу, но области ведь схожи, и 90% PHPшников весьма неплохо разбирается в верстке. На специфических же форумах верстальщиков царит обычно настолько недружелюбная атмосфера, что лишний раз туда и заходить не хочется. На этом же форуме даже к очень нубским или флеймогонным темам относятся с дружелюбием.
Видимо, это объясняется HTML-холопы голодные, бедные и злые, а PHP-бояре – наоборот - сытые, довольные и благодушные.
Моя первая поделка (несколько часов уже делаю) для того, чтобы закрепить познания в верстке, ну и вообще как-то начать уже шагать к практике. Всякие PHP фишки пока не лепил. В планах одностраничный сайт через инклюды, небольшой тестик, гостевуха и прочие свистелки-перделки. Знаю, что пока все ужасно, еще нет кроссбраузерности, не настроены медиазапросы, а еще и хостер поломал так любовно прижимаемый к низу футер, да и сам дизайн оставляет желать…
http://fenris.yolox.net/
Вопрос вот в чем: есть бэкграунд у боди с 2 фонами у которых разные значения background-position: собственно арт с воинами и .png с руническими надписями. А так же есть div основного контента со своим бэкграундом (свиток). При скроллинге свиток и рунические надписи сливаются воедино, так, будто бы это не 2 фона, а единая картинка со свитком в центре и рунической вязью по сторонам.. А мне хотелось бы, чтобы они скроллились с разной скоростью (свиток – быстро, а руническая вязь еле-еле), создавая некий эффект трехмерности. Будто бы они находятся не в одной плоскости. Есть возможность сделать это без яваскрипта?
T1grOK
Цитата (Идален @ 14.05.2014 - 11:27)
А мне хотелось бы, чтобы они скроллились с разной скоростью (свиток – быстро, а руническая вязь еле-еле), создавая некий эффект трехмерности

Это называется параллакс-эффект, вот по этой фразе и поищите в инете информацию. Есть достаточно много Jquery плагинов позволяющих получить такой эффект.

_____________
Mysql, Postgresql, Redis, Memcached, Unit Testing, CI, Kohana, Yii, Phalcon, Zend Framework, Joomla, Open Cart, Ymaps, VK Api
Zzepish
Цитата
будьте котэ

Терпеть не могу котов
Invis1ble
это называется parallax scrolling, как делается - не в курсе, не сталкивался, но скорее всего без js не обойтись.

_____________

Профессиональная разработка на заказ

Я на GitHub | второй профиль

Kopipaster
Цитата (Идален @ 14.05.2014 - 15:27)
Есть возможность сделать это без яваскрипта?

Нету.
Но 3D эфекта можно добится если рунам сделать гиф анимацию. На JS конечно красивее будет.
Идален
Цитата (T1grOK @ 14.05.2014 - 15:39)
Это называется параллакс-эффект, вот по этой фразе и поищите в инете информацию. Есть достаточно много Jquery плагинов позволяющих получить такой эффект.

Благодарю. Теперь я разберусь. Чувствую, заодно и малость в яваскрипт придется вникнуть (пока я им еще не занимался - сразу после HTML/CSS перешел к изучению PHP).
AllesKlar
Цитата (Zzepish @ 14.05.2014 - 15:45)
Цитата
будьте котэ

Терпеть не могу котов

Ты просто не умеешь их готовить wink.gif

_____________
[продано копирайтерам]
Zzepish
AllesKlar
мб) но я люблю собак) и я их не ем wink.gif
Идален
Цитата (Zzepish @ 14.05.2014 - 15:45)
Терпеть не могу котов

Я тоже не фанат. А фразочка из Теории Большого Взрыва. Недавно пересматривал, вот и вспомнилась.
----------------------------------------------------------------------
Кстати с эффектом я худо-бедно разобрался, что было не просто, с учетом, что к яваскрипту пока не притрагивался.
http://fenris.yolox.net/
Kopipaster
Цитата (Идален @ 14.05.2014 - 19:03)
стати с эффектом я худо-бедно разобрался, что было не просто, с учетом, что к яваскрипту пока не притрагивался.

Не знаю с чем ты там разобрался. Раньше руны скролились теперь статичны.
Идален
Цитата (Kopipaster @ 14.05.2014 - 19:10)
Не знаю с чем ты там разобрался. Раньше руны скролились теперь статичны.

Хммм... странно - у меня работает и в хроме и в лисе, как с локального сервера так и из сети...
UPD: Другу написал - он зашел, все работает. Может вы кнопками скролите а не колесиком?
Kopipaster
Цитата (Идален @ 14.05.2014 - 19:19)
Может вы кнопками скролите а не колесиком?

А ну да если колёсико крутить то работает, но тоже как то лево если честно. А так то я мышкой привык зажимаю колесо и тяну верх и вниз, куда как быстрее и плавнее всё это дело. Вот при таком способе руны статичные. Короче работает у тебя только если колёсиком крутить.
Идален
Цитата (Kopipaster @ 14.05.2014 - 20:00)
А ну да если колёсико крутить то работает, но тоже как то лево если честно. А так то я мышкой привык зажимаю колесо и тяну верх и вниз, куда как быстрее и плавнее всё это дело. Вот при таком способе руны статичные. Короче работает у тебя только если колёсиком крутить.

Да, реализация в лучшем случае на 4 с минусом sad.gif
Когда изучу хотя бы основы Яваскрипта - переделаю подчистую.
sergeiss
Цитата (Идален @ 14.05.2014 - 19:03)
http://fenris.yolox.net/

Там еще у тебя проблемы есть. Некоторые может и спорные, а некоторые точно проблемы.

1. Меню сверху находится на стыке шапки и центральной части - плохо читается.
2. Основной текст внутри прижат слева. Надо задать отступы какие-то, будет удобнее читать (== лучше юзабельность).
3. И еще можно сделать фон в виде "опаленной по краям и старой бумаги", а не просто "старую бумагу", как сейчас smile.gif Вполне будет соответствовать стилю.

PS.
4. Текст в "подвале" специально сделан таким мелким и нечитаемым?

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
BaNru
Цитата (Invis1ble @ 14.05.2014 - 15:48)
это называется parallax scrolling, как делается - не в курсе, не сталкивался, но скорее всего без js не обойтись.

Есть и CSS parallax.

Цитата (Kopipaster @ 14.05.2014 - 15:49)
Цитата (Идален @ 14.05.2014 - 15:27)
Есть возможность сделать это без яваскрипта?

Нету.
Но 3D эфекта можно добится если рунам сделать гиф анимацию. На JS конечно красивее будет.

Есть, смотри ссылку выше

Это в общем и ответ на вопрос ТС
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.