PDA

Zobacz pełną wersję : Animowane przejścia między podstronami.



mariuszwega82
17-05-2010, 23:18
Szukam dodatku, który realizowałby animowane przejścia między podstronami.

Tego typu jest fajny, ale pewnie bez flasha się nie obejdzie, więc nie pogardzę innymi propozycjami...

Pozdrawiam.

moje
17-05-2010, 23:27
Musisz tylko stworzyć szablon na AJAX'ie, co daje Ci też możliwość wprowadzenia dowolnych animacji.

tlewap
18-05-2010, 00:00
Chodzi Ci o efekt przenikania samych podstron, czy o animacje menu?

Edit: Może coś takiego się przyda:
http://www.2joomla.net/2j-tabs-demo-article/2j-tabs-demo-case-5-case-6-case-7.html

mariuszwega82
18-05-2010, 00:01
przenikanie podstron

moje
18-05-2010, 00:16
To nie jest przenikanie podstron, tylko artykułów. Klikając na inne łącze w menu (a nie w tabie) nie nastąpi efekt przenikania.

mariuszwega82
18-05-2010, 00:58
Ale mi zależy na osiągnięciu efektu atrakcyjnego efektu przenikania podstron.

moje - zasugerowałeś mi AJAX, jeśli chciałbym osiągnąć efekt przenikania na artykułach. Z pewnością się z nim zapoznam, jednak jestem już w trakcie pisania strony i tworzenie jej na nowo na innym (obcym mi na tą chwile systemie) nie ma wg mnie sensu. Na obecnym etapie wolę zrezygnować z wizji "przenikania artykułów" - ale być może istnieje sposób, który będzie dawał zbliżony efekt (lub zupełnie inny) i nie będzie ograniczony do jednej wyszukiwarki.

Pozdrawiam
Mariusz

tlewap
18-05-2010, 01:29
Może to się spodoba:

http://www.tvemka.pl/

strona na joomla + skrypt jquery

prince15
18-05-2010, 11:30
Ja znam jeszcze stary sposób, ale niestety tylko dla IE.


<meta http-equiv="Page-Exit" content="blendTrans(Duration=2.0)">
<meta http-equiv="Page-Enter" content="blendTrans(Duration=2.0)">

Jdwind
18-05-2010, 13:11
Może to się spodoba:

http://www.tvemka.pl/

strona na joomla + skrypt jquery
Co to za skrypt i gdzie można go znaleźć (jak w ogóle można)?

moje
18-05-2010, 18:54
Robiąc podgląd strony możesz już się wzbogacić o następujące informacje:

<script type="text/javascript" src="/templates/themza_j15_34/js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/templates/themza_j15_34/js/custom.js"></script>
Nie wiem czy to jest w szablonie, czy ktoś oddał to do szbalonu.

Jdwind
18-05-2010, 19:49
To widziałem @moje, ale chodziło mi raczej o to, co to za skrypt i gdzie znaleźć opis jego działania.
Pzdr.

moje
18-05-2010, 20:07
Podejrzewam, że na stronie z przykładami/tutorialami z jquery- mootools taką stronę ma.

tlewap
18-05-2010, 22:25
Co to za skrypt i gdzie można go znaleźć (jak w ogóle można)?

Stronka jest moja, skrypt GPL:

http://tvemka.pl/templates/themza_j15_34/js/jquery-1.4.1.min.js
a tu animacja (można się pobawić z ustawieniami):
http://tvemka.pl/templates/themza_j15_34/js/custom.js

W sekcji body, należy wrzucić ( w head nie działa pod joomla, przynajmniej u mnie):
<script type="text/javascript" src="adres/js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="adres/themza_j15_34/js/custom.js"></script>

i wszystko śmiga :)

seboxp
05-12-2011, 13:20
Witam odgrzeje temat, mam joomla 1,7 i widze że niby działa ten sposób bo się wczytują artykuły z animacją natomiast top strony się też odświeża a zależy mi żeby się nie odświeżał ponieważ w topie jest odtwarzacz muzyki i po przejściu w menu do innego artykułu muzyka odtwarza się na nowo.
tutaj kod z index.php



<?php
/**
* @version $Id: index.php 21518 2011-06-10 21:38:12Z chdemko $
* @package Joomla.Site
* @subpackage Templates.beez_20
* @copyright Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access.
defined('_JEXEC') or die;

// check modules
$showRightColumn = ($this->countModules('position-3') or $this->countModules('position-6') or $this->countModules('position-8'));
$showbottom = ($this->countModules('position-9') or $this->countModules('position-10') or $this->countModules('position-11'));
$showleft = ($this->countModules('position-4') or $this->countModules('position-7') or $this->countModules('position-5'));

if ($showRightColumn==0 and $showleft==0) {
$showno = 0;
}

JHtml::_('behavior.framework', true);

// get params
$color = $this->params->get('templatecolor');
$logo = $this->params->get('logo');
$navposition = $this->params->get('navposition');
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$templateparams = $app->getTemplate(true)->params;

$doc->addScript($this->baseurl.'/templates/beez_20/javascript/md_stylechanger.js', 'text/javascript', true);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/layout.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/style.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/960.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/reset.css" type="text/css" />
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/script/mootools-fluid16-autoselect.js" type="text/javascript"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/script/mootools-1.2-more.js" type="text/javascript"></script>

<link href='http://fonts.googleapis.com/css?family=Pinyon+Script' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Marck+Script&subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>


<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/audio/audio-player.js"></script>
<script type="text/javascript">
AudioPlayer.setup("http://www./templates/portfolio/audio/player.swf", {
width: 85,
transparentpagebg: "yes",
autostart: "yes"
});
</script>


<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/script/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/script/custom.js"></script>

</head>

<body>

<div id="top">
<div id="menu" class="container_16">
<div id="logo" class="grid_5 "></div>
<div id="muzyka" class="grid_2 ">
<div id="audioplayer_1">Alternative content</div>
<script type="text/javascript">
AudioPlayer.embed("audioplayer_1", {soundFile: "http://www."});
</script>


</div>


<div align="right" id="menu-bar" class="grid_8 "><jdoc:include type="modules" name="menu" style="xhtml"/></div></div>

<div id="content-layout">
<div id="content" class="container_16">

<div><jdoc:include type="component" style="table"/></div>
<div class="clear"></div>
<div align="center" id="modul"><div id="slider"><jdoc:include type="modules" name="slider" /></div></div>
<div class="clear"></div>
</div>


<div class="clear"></div>

</div>
<div id="footer-layout">
<div id="footer" class="container_12">
<img src="images/logo-male.png" alt="fotografia" style="float:left; padding-right:5px;">
<div id="footer-text">
<div class="grid_5 alpha"><span id="copy"> Portfolio &copy; 2011 │ Wszelkie prawa zastrzeżone.</span></div>
<div class="grid_2"></div>
<div class="grid_3 omega"><span id="power"><a href="">Projekt i wykonanie </a></span></div>
</div>
</div>
</div>
<jdoc:include type="modules" name="debug" />
</body>
</html>