• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Effects/shrink/grow

New Here ,
Sep 26, 2020 Sep 26, 2020

Copy link to clipboard

Copied

Hi, I would like to use CS3 Effects - Shrink/Grow behaviour on multiple jpg. images throughout my site.  The application works fine for my purpose.  Is there any way that I can change the default selections in the Grow/Shrink panel.  Eg. it opens up the panel with Shrink - I select Grow...  Shrink to Centre - I want Top Left Corner... Toggle Effect is un-ticked - I want to tick box.  This would save me a great amount of time.  I have tried copy and paste the working code to each image/page but get myself in to an aweful pickle.  Thank you for any help.

Views

401

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 27, 2020 Sep 27, 2020

Copy link to clipboard

Copied

I'm sorry, I don't know what Shrink/Grow panel you're talking about.  Maybe what you're looking for is a CSS Pulse animation effect? See link below for code and examples.

https://www.geeksforgeeks.org/css-pulse-animation/

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 28, 2020 Sep 28, 2020

Copy link to clipboard

Copied

Hi Nancy, thank you for your reply.  The panel that I am talking about can be found in WINDOWS / BEHAVIOURS / EFFECTS / Shrink/Grow tab. (behaviour/attributes opens on R/H/S above FILES column).  Click on Behaviours and the + sign.  It will open a drop down menu.  Choose EFFECTS and then choose Shrink/Grow a panel will appear. see pic attached.  You need to have the image in the page selected and then you can apply the effect to it.  You can see that the panel opens with a default selection.  I have to change [Shrink] to [Grow].....[Centre] change to [Top Left Corner] and tick the un-ticked box.  I have many pages with images on that I wish to apply this to... My question is, can I somehow change the defaults in that panel when it is opened to show [Grow]... [Top Left Corner] and box already ticked as the new defaults.  The application works fine as it is....but I have to change these settings each time I open the panel.  Effects Panel.JPG

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 28, 2020 Sep 28, 2020

Copy link to clipboard

Copied

Which version of DW do you have? I don't have a Shrink/Grow option in my Behavior Effects. 

I have no idea if panel default settings can be changed permanently or not. I've never gone looking for them in the programming code. 

 

 

 

 

 

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 28, 2020 Sep 28, 2020

Copy link to clipboard

Copied

What is it you are exactly trying to do? There may be a simple copy and paste solution rather than having to select each individual image and use a User Interface to apply the attributes, which can be really, really slow if you have a number of images that you need to apply the effect to.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 28, 2020 Sep 28, 2020

Copy link to clipboard

Copied

This is HTML5 and pure CSS code.  No MM behaviors, no jQuery & no JavaScript.

 

image.png

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pure CSS Effects</title>
<style>
/**Basic Layout**/
body{background:antiquewhite;}

.container {
width: 98%;
margin: 0 auto;
}

/* Special Rules for devices over 700px wide */
@media only screen and (min-width: 699px) {
.container {
width: 90%;
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: space-around;
}
}

img {
max-width: 100%;
vertical-align: baseline;
}
/**CSS Animation**/
.grow {
transform: scale(50%);
transition: 1000ms;
transition-property: transform;
}
.grow:hover { transform: scale(100%); }

.shrink {
transform: scale(100%);
transition: 1000ms;
transition-property: transform;
}
.shrink:hover { transform: scale(50%); }
</style>
</head>

<body>
<div class="container">
<div>
<h3>Mouseover to Grow Image</h3>
<img class="grow" src="https://dummyimage.com/400x350" alt="placholder"> </div>
<div>
<h3>Mouseover to Shrink Image</h3>
<img class="shrink" src="https://dummyimage.com/400x350" alt="placholder"> </div>
</div>
</body>
</html>

 

Post back if you have any questions.

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 30, 2020 Sep 30, 2020

Copy link to clipboard

Copied

LATEST

Hi Nancy, thank you for your time and your suggestion/code.  I have discovered that I can type 'E' to open the [Effect Menu], 'G' for the [Shrink/Grow] panel and I can tab through each selection and type the first letter of the selection and it will fill with the result that I want.  eg. type 'G' in the shrink box and [Grow] will appear.  TAB to the next selection and type 'T' and [Top Left Corner] will appear TAB again and press Space Bar and [A Tick] will appear in the empty box.  Not fantastic but a lot easier to use, than going through each drop down and selecting.  Thank you also to all who read my post.  All the best, kind regards.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines