Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.04.2014, 13:08
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

как сделать эффект explode с позицией fixed
Здравствуйте
родительский блок - выровнен по центру экрана и имеет позицию fixed
в дочернем блоке - картинка, которая открывается/закрывается с эффектом explode (разбитие/соединение кусочков картинки)

если во время анимации explode прокрутить страницу вверх или вниз - родительский блок остается фиксированным, а разбитые кусочки картинки прокручиваются вместе со страницей

как сделать так- чтобы анимация explode не прокручивалась, а имела позицию fixed, как и родительский блок
вот пример - http://www.glass-pgc.ru/Untitled-4ff.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.glass-pgc.ru/sashka/banner_action/effects.core.full.js"></script> 
<style>
body{height: 1000px}
</style>
<script type="text/javascript">
$(document).ready(function(){
   $("#blok1").fadeIn(4000);
   $("#blok2").show("explode", {pieces: 9}, 3000);

$("#closes").click(function () {
   $("#blok1").fadeOut(4000);
   $("#blok2").hide("explode", {pieces: 9}, 3000);
    });   

   });
</script>
<div id="blok1" style="position:fixed; left:50%;margin-left:-155px; width:310px; top:50%; margin-top:-156px; height:312px; background-color:#CDC29C; z-index:99999;">
<div id="closes" style="float: right; cursor: pointer;">x</div>
<p style="text-align:center;">Всплывающий див..</p>
<div id="blok2"><img src="http://www.glass-pgc.ru/images/stories/glass/content/install_1.jpg" width="310" height="200"  border="0"></div>
</div>
Ответить с цитированием
  #2 (permalink)  
Старый 04.04.2014, 13:16
Аватар для nice_try
Профессор
Отправить личное сообщение для nice_try Посмотреть профиль Найти все сообщения от nice_try
 
Регистрация: 11.12.2013
Сообщений: 313

запрети прокрутку на время explode
Ответить с цитированием
  #3 (permalink)  
Старый 04.04.2014, 13:21
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

nice_try,
где вы видите что я прошу готовый скрипт с нуля?
запретить прокрутку во время анимации explode - это не решение проблемы

Последний раз редактировалось sashgera, 04.04.2014 в 13:24.
Ответить с цитированием
  #4 (permalink)  
Старый 04.04.2014, 16:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

sashgera,
откорректируйте $.effects.explode в effects.core.full.js
Ответить с цитированием
  #5 (permalink)  
Старый 04.04.2014, 16:44
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

Сообщение от рони Посмотреть сообщение
sashgera,
откорректируйте $.effects.explode в effects.core.full.js
в effects.core.full.js клонированному элементу присваивал позицию fixed - анимация после этого перестает работать

.......
.clone()
.appendTo('body')
.wrap('<div></div>')
.css({
position: 'absolute', // fixed
......

Последний раз редактировалось sashgera, 04.04.2014 в 16:47.
Ответить с цитированием
  #6 (permalink)  
Старый 04.04.2014, 16:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

sashgera,
теплее теплее ))) но не то
Ответить с цитированием
  #7 (permalink)  
Старый 04.04.2014, 17:00
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

рони,
.addClass('effects-explode')
.css({
position: 'absolute', //заменил на fixed

почти то-же самое
Ответить с цитированием
  #8 (permalink)  
Старый 04.04.2014, 17:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Сообщение от sashgera
почти то-же самое
при открытии окна наверно всё ок уже? тока при закрытии ещё должно глючить -- если анимация началась она уже останется на месте - так? тогда осталось отработать скролл
Ответить с цитированием
  #9 (permalink)  
Старый 04.04.2014, 17:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

sashgera,
пока вам картинка для надежды на то что выход есть
Ответить с цитированием
  #10 (permalink)  
Старый 04.04.2014, 17:27
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

рони,
да, когда скролл в самом верху и началась анимация она не уже не пропадает (остается в родительском диве)
но если страницу проскроллить вниз и запустить анимацию, то effects-explode опускается ниже родительского дива
вот- http://www.glass-pgc.ru/Untitled-4ff.php
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать проверку на display: block; ufaclub jQuery 3 22.12.2013 19:21
Как сделать калькулятор и с чего начать? A.P. Yellowman Общие вопросы Javascript 3 15.11.2013 21:32
Как сделать реакцию на изменение любого элемента формы. Mik Events/DOM/Window 3 28.07.2011 08:52
Как убрать hover? Либо как сделать стрелки статичными? krusty36 Элементы интерфейса 1 13.07.2011 09:20
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06