• ДОБРО ПОЖАЛОВАТЬ В КЛУБ ПО WORDPRESS

    Мы активно растущий клуб по WordPress и нам нужна помощь каждого человека, в том числе и Ваша! Не стесняйтесь и станьте частью большого сообщества.
    Мы делимся новостями, отытом и полезными советами! Пройдите простую регистрацию, чтобы пользоваться всеми возможностями нашего клуба.

    Присоединяйтесь к нам, вам обязательно понравится - Присоединится

Нужно анимировать посты

mariet

НОВИЧОК

mariet

НОВИЧОК
Сообщения
4
Необходимо анимировать посты сайта Для просмотра ссылки Войди или Зарегистрируйся чтоб при наведении голубой прямоугольник выдвигался сбоку.

Файл page.php выглядит так

PHP:
<?php get_header(); ?>

<?php
/** Themify Default Variables
*  @var object */
global $themify; ?>

<!-- layout-container -->
<div id="layout" class="pagewidth clearfix">

   <?php themify_content_before(); // hook ?>
   <!-- content -->
   <div id="content" class="clearfix">
     <?php themify_content_start(); // hook ?>

     <?php
     /////////////////////////////////////////////
     // 404           
     /////////////////////////////////////////////
     if(is_404()): ?>
       <h1 class="page-title" itemprop="headline"><?php _e('404','themify'); ?></h1>
       <p><?php _e( 'Page not found.', 'themify' ); ?></p>
     <?php endif; ?>

     <?php
     /////////////////////////////////////////////
     // PAGE           
     /////////////////////////////////////////////
     ?>
     <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
       <div id="page-<?php the_ID(); ?>" class="type-page" itemscope itemtype="http://schema.org/Article">
         
       <!-- page-title -->
       <?php if($themify->page_title != "yes"): ?>
         <time datetime="<?php the_time( 'o-m-d' ); ?>" itemprop="datePublished"></time>
         <h1 class="page-title" itemprop="headline"><?php the_title(); ?></h1>
       <?php endif; ?>
       <!-- /page-title -->

       <div class="page-content entry-content" itemprop="articleBody">
   
   
         <?php if ( has_post_thumbnail() ) : ?>
           <figure class="post-image"><meta itemprop="image" content="<?php echo esc_url( wp_get_attachment_thumb_url( get_post_thumbnail_id() ) ); ?>" /><?php themify_image( "{$themify->auto_featured_image}w={$themify->page_image_width}&h=0&ignore=true" ); ?></figure>
         <?php endif; ?>

         <?php the_content(); ?>
   
         <?php wp_link_pages(array('before' => '<p class="post-pagination"><strong>'.__('Pages:','themify').'</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
     
         <?php edit_post_link(__('Edit','themify'), '[', ']'); ?>
     
         <!-- comments -->
         <?php if(!themify_check('setting-comments_pages') && $themify->query_category == ""): ?>
           <?php comments_template(); ?>
         <?php endif; ?>
         <!-- /comments -->
   
     
       </div>
       <!-- /.post-content -->
 
       </div><!-- /.type-page -->
     <?php endwhile; endif; ?>
 
     <?php
     /////////////////////////////////////////////
     // Query Category           
     /////////////////////////////////////////////
     ?>

     <?php
 
     if($themify->query_category != ""): ?>
 
       <?php if(themify_get('section_categories') != 'yes'): ?>
   
         <?php query_posts( apply_filters( 'themify_query_posts_page_args', 'cat='.$themify->query_category.'&posts_per_page='.$themify->posts_per_page.'&paged='.$themify->paged.'&order='.$themify->order.'&orderby='.$themify->orderby ) ); ?>
     
           <?php if(have_posts()): ?>
         
             <!-- loops-wrapper -->
             <div id="loops-wrapper" class="loops-wrapper <?php echo $themify->layout . ' ' . $themify->post_layout; ?>">

               <?php while(have_posts()) : the_post(); ?>
             
                 <?php get_template_part('includes/loop', 'query'); ?>
         
               <?php endwhile; ?>
                     
             </div>
             <!-- /loops-wrapper -->

             <?php if ($themify->page_navigation != "yes"): ?>
               <?php get_template_part( 'includes/pagination'); ?>
             <?php endif; ?>
             
           <?php else : ?>
       
           <?php endif; ?>

       <?php else: ?>
     
         <?php $categories = explode(",",str_replace(" ","",$themify->query_category)); ?>
     
         <?php foreach($categories as $category): ?>
     
           <?php $category = get_term_by(is_numeric($category)? 'id': 'slug', $category, 'category');
           $cats = get_categories( array( 'include' => isset( $category ) && isset( $category->term_id )? $category->term_id : 0, 'orderby' => 'id' ) ); ?>
       
           <?php foreach($cats as $cat): ?>
         
             <?php query_posts( apply_filters( 'themify_query_posts_page_args', 'cat='.$cat->cat_ID.'&posts_per_page='.$themify->posts_per_page.'&paged='.$themify->paged.'&order='.$themify->order.'&orderby='.$themify->orderby ) ); ?>
     
             <?php if(have_posts()): ?>
           
               <!-- category-section -->
               <div class="category-section clearfix <?php echo $cat->slug; ?>-category">

                 <h3 class="category-section-title"><a href="<?php echo esc_url( get_category_link($cat->cat_ID) ); ?>" title="<?php _e('View more posts', 'themify'); ?>"><?php echo $cat->cat_name; ?></a></h3>

                 <!-- loops-wrapper -->
                 <div id="loops-wrapper" class="loops-wrapper <?php echo $themify->layout . ' ' . $themify->post_layout; ?>">
                   <?php while(have_posts()) : the_post(); ?>
                 
                     <?php get_template_part('includes/loop', 'query'); ?>
             
                   <?php endwhile; ?>
                 </div>
                 <!-- /loops-wrapper -->

                 <?php if ($themify->page_navigation != "yes"): ?>
                   <?php get_template_part( 'includes/pagination'); ?>
                 <?php endif; ?>

               </div>
               <!-- /category-section -->
               
             <?php else : ?>
         
             <?php endif; ?>
       
           <?php endforeach; ?>
     
         <?php endforeach; ?>
   
       <?php endif; ?>

       <?php wp_reset_query(); ?>
   
     <?php endif; ?>

     <?php themify_content_end(); // hook ?>
   </div>
   <!-- /content -->
  <?php themify_content_after(); // hook ?>

   <?php
   /////////////////////////////////////////////
   // Sidebar           
   /////////////////////////////////////////////
   if ($themify->layout != "sidebar-none"): get_sidebar(); endif; ?>

</div>
<!-- /layout-container -->

<?php get_footer(); ?>


Голубой прямоугольник вставился только из файла loop.php:

Код:
<?php if(!is_single()){ global $more; $more = 0; } //enable more link ?>

<?php
/** Themify Default Variables
*  @var object */
global $themify;
?>

<?php themify_post_before(); // hook ?>

<article itemscope itemtype="http://schema.org/Article" id="post-<?php the_ID(); ?>" <?php post_class("post clearfix " . $themify->get_categories_as_classes(get_the_ID())); ?>>

   <?php themify_post_start(); // hook ?>

   <?php
   //check if there is a video url in the custom field
   if( themify_get('video_url') != '' ){
     global $wp_embed;
  
     themify_before_post_image(); // Hook
  
     echo $wp_embed->run_shortcode('[embed]' . themify_get('video_url') . '[/embed]');
  
     themify_after_post_image(); // Hook
  
   } elseif( $post_image = themify_get_image($themify->auto_featured_image . $themify->image_setting . "w=".$themify->width."&h=".$themify->height . '&image_meta=true') ){
     if($themify->hide_image != 'yes'): ?>
  
       <?php themify_before_post_image(); // Hook ?>
    
       <figure class="post-image <?php echo $themify->image_align; ?>">
         <?php if( 'yes' == $themify->unlink_image): ?>
           <?php echo $post_image; ?>
         <?php else: ?>
           <a href="<?php echo themify_get_featured_image_link(); ?>"><?php echo $post_image; ?><?php themify_zoom_icon(); ?></a>
         <?php endif; ?>
       </figure>
    
       <?php themify_after_post_image(); // Hook ?>
    
     <?php endif; //post image
   } ?>

   <div class="post-content">

     <?php if($themify->hide_date != 'yes'): ?>
       <time datetime="<?php the_time('o-m-d') ?>" class="post-date entry-date updated" itemprop="datePublished"><?php echo get_the_date( apply_filters( 'themify_loop_date', '' ) ) ?></time>
     <?php endif; //post date ?>
  
<div style="background: url('http://ekspert-uc.ru/wp-content/themes/basic/images/screen_4_budget_bg.jpg') center bottom no-repeat; width: 100%; height: 140px; position: relative;">

  </div>
     <?php if($themify->hide_title != 'yes'): ?>
       <?php themify_before_post_title(); // Hook ?>
       <?php if($themify->unlink_title == 'yes'): ?>
    
         <h1 class="post-title entry-title" itemprop="headline"><?php the_title(); ?></h1>
       <?php else: ?>
         <h1 class="post-title entry-title" itemprop="headline"><a href="<?php echo themify_get_featured_image_link(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
       <?php endif; //unlink post title ?>
       <?php themify_after_post_title(); // Hook ?>
     <?php endif; //post title ?>

     <?php if($themify->hide_meta != 'yes'): ?>
       <p class="post-meta entry-meta">
         <span class="post-author"><?php echo themify_get_author_link() ?></span>
         <span class="post-category"><?php the_category(', ') ?></span>
         <?php the_tags(' <span class="post-tag">', ', ', '</span>'); ?>
         <?php  if( !themify_get('setting-comments_posts') && comments_open() ) : ?>
           <span class="post-comment"><?php comments_popup_link( __( '0 Comments', 'themify' ), __( '1 Comment', 'themify' ), __( '% Comments', 'themify' ) ); ?></span>
         <?php endif; //post comment ?>
       </p>
     <?php endif; //post meta ?>
  
     <div class="entry-content  block_anim" itemprop="articleBody">
     <div сlass="block_anim_wrap" style="background-color:rgba(89,171,192,0.6);">

     <?php if ( 'excerpt' == $themify->display_content && ! is_attachment() ) : ?>

       <?php the_excerpt(); ?>
<div class="mask1"></div>
       <?php if( themify_check('setting-excerpt_more') ) : ?>
         <p><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute('echo=0'); ?>" class="more-link"><?php echo themify_check('setting-default_more_text')? themify_get('setting-default_more_text') : __('More &rarr;', 'themify') ?></a></p>
         <div class="mask1"></div>
       <?php endif; ?>

     <?php elseif ( 'none' == $themify->display_content && ! is_attachment() ) : ?>

     <?php else: ?>

       <?php the_content(themify_check('setting-default_more_text')? themify_get('setting-default_more_text') : __('More &rarr;', 'themify')); ?>
     <div class="mask1"></div>
     <?php endif; //display content ?>

     </div>
     </div><!-- /.entry-content -->
  
     <?php edit_post_link(__('Edit', 'themify'), '<span class="edit-button">[', ']</span>'); ?>
  
   </div>
   <!-- /.post-content -->
   <?php themify_post_end(); // hook ?>

</article>
<?php themify_post_after(); // hook ?>

<!-- /.post -->
Помогите его анимировать.
 
Последнее редактирование модератором:

Попай

АДМИНИСТРАТОР

Попай

АДМИНИСТРАТОР
Сообщения
3,202
mariet, Вы хоть смотрели что тут понапихали? Для вставки кода есть специальная кнопка в редакторе.
 

Di Ost

СВОЙ

Di Ost

СВОЙ
Сообщения
191
mariet, блендер мне в глаза, отредактируйте пост согласно правилам ( как выше написал Гарри, код в специальную вставку, тогда будет более понятно.
Перешел на сайт, не понял где должен выдвигаться какой прямоугольник. объясните подробнее из какой части\элемента он должен выдвигаться и что нести ?
 

mariet

НОВИЧОК

mariet

НОВИЧОК
Сообщения
4
Голубой перямоугольник-фон в каждом посте.Без наведения его не видно,а при наведении он выдвигается сбоку, можно с текстом или без текста.обозначен как

<div сlass="block_anim_wrap" style="background-color:rgba(89,171,192,0.6);">

Должен выдвигаться внутри
<div class="entry-content block_anim" itemprop="articleBody">.
В css не работает код

Код:
.block_anim .block_anim_wrap{
    position:absolute;
    top:0;
    left:0;
    width:0px;
    height: 100%;
    background: rgba(0,0,255,0.3);
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}
.block_anim:hover .block_anim_wrap{
    width:100%
}
Не знаю в чем дело, не работает
 

mariet

НОВИЧОК

mariet

НОВИЧОК
Сообщения
4
если не знаете как решить, посоветуйте где можно еще спросить там где есть знающие специалисты.
 

Попай

АДМИНИСТРАТОР

Попай

АДМИНИСТРАТОР
Сообщения
3,202
Я вот вообще не вижу, что и где выдвигается сбоку. Прямоугольник "Подробнее", если вы об этом, голубой, при наведение он становится темно голубым.

Что-то вы мудрите? Вообще оно вам это надо, эти рюшечки? На развитие сайта это мало как играет.
 

mariet

НОВИЧОК

mariet

НОВИЧОК
Сообщения
4
администрирую сайт им нужно поменять дизайн чтоб прям крутой дизайн.
 

asis

МЕСТНЫЙ

asis

МЕСТНЫЙ
Сообщения
118
mariet, Если честно и не в обиду будет написано, вам надо полностью шаблон менять. Тут анимацией кнопочки не отделаешься, что бы им понравилось.

Есть куча красивых шаблонов, посмотрите тут может, что понравиться.
 

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Простое поп-ап окно при наведении на ссылку
HTML:
<A href="" onMouseOver='window.open("popdemo.htm", "demo", "width=200, height=150")'>Наведите мышь на этот текст</A>
Анимированое поп-ап
HTML:
Содержимое этой таблицы поместите между <BODY> и </BODY>
 
 
<script>
<!--


var winheight=100
var winsize=100
var x=5

/*
Animated Window Opener Script (updated 00/04/24)-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, 100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/



function openwindow(thelocation){
temploc=thelocation
if (!(window.resizeTo&&document.all)&&! (window.resizeTo&&document.getElementById)){
window.open(thelocation)
return
}
win2=window.open("","","scrollbars")
win2.moveTo(0,0)
win2.resizeTo(100,100)
go2()
}
function go2(){
if (winheight>=screen.availHeight-3)
x=0
win2.resizeBy(5,x)
winheight+=5
winsize+=5
if (winsize>=screen.width-5){
win2.location=temploc
winheight=100
winsize=100
x=5
return
}
setTimeout("go2()",50)
}
//-->
</script>

<p><a href="javascript:openwindow('home.htm')">Главная страница</a>
<p><a href="javascript:openwindow('Link.htm')">Линки</a>
Анимированый можно пользовать так. Вставить скрипт в функцию а линк повесить на кнопку. (можно заменить функцию нажатия на кнопку на функцию наведения из первого варианта)

вот еще вариант
HTML:
<A href="#top" onMouseOver='alert("Поместите свой текст сюда!")'>
Наведите мышь на этот текст</A>
 
Сверху